当用户使用 f5 重新加载页面时,如何在 angular 中正确进行?

How to proceed correctly in angular when the user reloads the page with f5?

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

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

private initializeComponent() {

}

这是正确的做法吗?这是一种好的做法还是我应该以其他方式进行?提前致谢。

为了使我的评论正式化:如果您使用浏览器的 refresh/reload,或 Location.reload() to refresh any page on an angular application, you do run ngOnInit() again, and all other life-cycle hooks

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

的作用

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

您稍后评论中的措辞 "enters the same route" 假定 已经 一条已知路线。没有,因为应用程序完全重新引导。

您可能正在考虑调用 router.navigate([...]) to your present location with identical path parameters. This will not emit a NavigationStart 事件,路由器将不会尝试加载任何内容(因为为什么会这样,您还没有导航到任何地方)。反过来,不会调用ngOnInit()

也就是说,,您目前处理路径参数的方式是最好的解决方案,主要是因为它允许您对路径的变化做出反应无需强制您 重新初始化组件。

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