时间戳

首页 > 解决方案 > 重新初始化组件或强制它在 Angular 中再次运行 ngOnInit()

angular - 重新初始化组件或强制它在 Angular 中再次运行 ngOnInit()

问题描述

我在 Angular 中有一个表格组件，它根据用户的要求获得不同的数据，然后填充表格。表格变得相对复杂，当用户要求不同的东西时，我需要整个组件基本上刷新。当用户更改父组件上的选择时，有没有办法强制组件重新初始化？或者可能会杀死组件以使其必须重新加载？我对 Angular 比较陌生，所以我仍在尝试了解组件生命周期的工作原理，任何帮助将不胜感激。

标签： angularngoninit

解决方案

在您的组件中创建一个实用程序函数，只需确保您的新状态所需的所有数据都已准备好。

redirect(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

然后像这样使用它

this.redirect('//place your uri here');

这个函数将重定向到一个虚拟路由并在用户没有意识到的情况下快速返回到目标路由。

方法二：可以订阅路由器的导航事件。

 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 
          }
        }
      }
    });

推荐阅读