Как обновить компонент в Angular
Разница между BeanFactory и ApplicationContext следующая:
- BeanFactory использует ленивую инициализацию, но ApplicationContext использует нетерпемую инициализацию. В случае BeanFactory bean создается при вызове метода getBeans (), но bean создается заранее в случае ApplicationContext при создании объекта ApplicationContext.
- BeanFactory явно предоставляет объект ресурса с использованием синтаксиса, но ApplicationContext создает и управляет объектами ресурсов сам по себе.
- BeanFactory не поддерживает интернационализацию, но ApplicationContext поддерживает интернационализацию.
- С введением зависимостей на основе аннотации BeanFactory не поддерживается, но в приложении ApplicationContext поддерживается инъекция зависимостей на основе аннотаций.
Использование BeanFactory:
BeanFactory beanfactory = new XMLBeanFactory(new FileSystemResource("spring.xml"));
Triangle triangle =(Triangle)beanFactory.getBean("triangle");
Использование ApplicationContext:
ApplicationContext context = new ClassPathXMLApplicationContext("spring.xml")
Triangle triangle =(Triangle)beanFactory.getBean("triangle");
10 ответов
После некоторого исследования и изменения моего кода, как показано ниже, скрипт работал для меня. Я просто добавил условие:
this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));
Добавление этого кода в конструктор необходимого компонента сработало для меня.
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.mySubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Trick the Router into believing it's last link wasn't previously loaded
this.router.navigated = false;
}
});
Обязательно unsubscribe из этой моей подписки в ngOnDestroy().
ngOnDestroy() {
if (this.mySubscription) {
this.mySubscription.unsubscribe();
}
}
Подробнее об этом см. В этой теме - https://github.com/angular/angular/issues/13831
.кдо
// reload page hack methode
push(uri: string) {
this.location.replaceState(uri) // force replace and no show change
await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
this.location.replaceState(uri) // replace
}
Используйте this.ngOnInit (); , чтобы перезагрузить тот же компонент, вместо того, чтобы перезагрузить всю страницу !!
DeleteEmployee(id:number)
{
this.employeeService.deleteEmployee(id)
.subscribe(
(data) =>{
console.log(data);
this.ngOnInit();
}),
err => {
console.log("Error");
}
}
К счастью, если вы используете Angular 5.1+, вам больше не нужно реализовывать хак, так как была добавлена нативная поддержка. Вам просто нужно установить onSameUrlNavigation для «перезагрузки» в параметрах RouterModule:
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
exports: [RouterModule],
})
Дополнительную информацию можно найти здесь: https://medium.com/engineering- на-уклон / перегрузок по току маршрутных-на-клик-угловой 5-1a1bfc740ab2
В моем приложении у меня есть компонент, и все данные поступают из API, который я вызываю в конструкторе компонента. Есть кнопка, с помощью которой я обновляю данные моей страницы. при нажатии кнопки я сохраняю данные в серверной части и обновляю данные. Поэтому перезагрузить / обновить компонент - в соответствии с моим требованием - это только обновить данные. если это тоже ваше требование, используйте тот же код, написанный в конструкторе компонента.
Другой способ обновить (сложным способом) страницу в угловом 2, например, это выглядит как f5
import { Location } from '@angular/common';
constructor(private location: Location) {}
pageRefresh() {
location.reload();
}
Это может быть достигнуто путем взлома, перейдите к некоторому образцу компонента, а затем перейдите к компоненту, который вы хотите перезагрузить.
this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
Еще один путь без явного маршрута:
async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('.', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
-
1
constructor(private router:Router, private route:ActivatedRoute ) {
}
onReload(){
this.router.navigate(['/servers'],{relativeTo:this.route})
}