当用户使用f5重新加载页面时,如何正确处理角度?

时间:2017-10-30 19:51:08

标签: angular typescript angular-router angular4-router

我是Angular 2-4的新手,现在我在使用f5重新加载页面时出现问题。正如我所看到的,问题是我正朝着相同的路线导航,因此不会再次加载ngOnInit()。在ngOnInit()中我初始化了我使用的一些变量和动态表单。我已经看到了一个可能的解决方案,即订阅路由的参数,并调用一个初始化所有内容的方法。像这样:

this.activeRoute.params.subscribe(
params => {
   this.paramX = params['paramX'];
   this.initializeComponent();
});

private initializeComponent() {

}

这是正确的方法吗?这是一个好习惯还是我应该用另一种方式做?提前谢谢。

1 个答案:

答案 0 :(得分:4)

要正式化我的评论:如果您使用浏览器的刷新/重新加载,或Location.reload()刷新角度应用程序上的任何页面,则会再次运行ngOnInit(),并运行所有其他life-cycle hooks

这是因为您从头开始重新加载整个应用程序,一直到platformBrowserDynamic().bootstrapModule(AppModule),然后重新引导所有内容。这就是刷新所做的

如果您需要演示,请在您的组件ngOnInit()中打开Developer Tools and set a breakpoint并点击刷新。你将在断点处停下来。

后面的评论中的措辞“进入相同的路线”假设已经已知路线。没有,因为应用程序完全重新引导。

您可能正在考虑使用相同的路径参数调用router.navigate([...])到您当前的位置。这不会发出NavigationStart事件,路由器也不会尝试加载任何东西(因为它为什么会这样,你没有在任何地方导航)。反过来,不会调用ngOnInit()

那就是说,,你当前处理路径参数的方式是最好的解决方案,主要是因为它允许你对路径中的变化做出反应而不强迫你重新初始化组件。

换句话说,如果所有组件逻辑都依赖于设置OnInit的动态路径参数,那么在组件实例化后参数发生变化会发生什么?什么都没有。