在 Angular 中重新初始化组件或强制其再次 运行 ngOnInit()
Re-initializing a component or forcing it to run ngOnInit() again in Angular
我在 Angular 中有一个 table 组件,它根据用户的要求获得不同的数据,然后填充 table。 table 变得相对复杂,我需要整个组件在用户要求不同的东西时进行实质性刷新。当用户更改父组件上的选择时,有没有办法强制组件重新初始化?或者也许杀死组件以便它必须重新加载?我是 Angular 的新手,所以我仍在尝试了解组件生命周期的工作原理,如有任何帮助,我们将不胜感激。
在您的组件中创建一个效用函数,只需确保您的新状态所需的所有数据都已准备就绪。
redirect(uri:string){
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([uri]));
}
然后像这样使用它
this.redirect('//place your uri here');
此函数将重定向到虚拟路由,并在用户没有意识到的情况下快速return到目标路由。
方法二:
您可以订阅路由器的导航事件。
this.navigationSubscription = this.router.events.subscribe((e) => {
// If it is a NavigationEnd event re-initialize the component
if (e instanceof NavigationEnd) {
// implement your refresh logic here
}
}
}
});
我在 Angular 中有一个 table 组件,它根据用户的要求获得不同的数据,然后填充 table。 table 变得相对复杂,我需要整个组件在用户要求不同的东西时进行实质性刷新。当用户更改父组件上的选择时,有没有办法强制组件重新初始化?或者也许杀死组件以便它必须重新加载?我是 Angular 的新手,所以我仍在尝试了解组件生命周期的工作原理,如有任何帮助,我们将不胜感激。
在您的组件中创建一个效用函数,只需确保您的新状态所需的所有数据都已准备就绪。
redirect(uri:string){
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([uri]));
}
然后像这样使用它
this.redirect('//place your uri here');
此函数将重定向到虚拟路由,并在用户没有意识到的情况下快速return到目标路由。
方法二: 您可以订阅路由器的导航事件。
this.navigationSubscription = this.router.events.subscribe((e) => {
// If it is a NavigationEnd event re-initialize the component
if (e instanceof NavigationEnd) {
// implement your refresh logic here
}
}
}
});