当用户使用 f5 重新加载页面时，如何正确进行 Angular 处理？答案

【问题标题】：How to proceed correctly in angular when the user reloads the page with f5?当用户使用 f5 重新加载页面时，如何正确进行 Angular 处理？
【发布时间】：2018-04-11 21:34:02
【问题描述】：

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

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

private initializeComponent() {

}

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

【问题讨论】：

如果您刷新页面，您确实再次运行ngOnInit() 以及所有其他生命周期挂钩，因为您正在从头开始重新加载整个应用程序。也就是说，你提出的模式很好。
但我正在使用路由，据我所知，当我使用 f5 重新加载时，它会进入相同的路由并且不会刷新组件，因此它也不会执行 ngOnInit ()。这就是为什么必须订阅才能了解更改的原因。我错了吗？
它确实刷新了整个应用程序（直到app.component）。想想看。当您重新加载浏览器窗口时，它会转储 window 中的所有内容并从服务器（或缓存）加载所有内容，但您会丢失整个应用程序状态。 Angular 与任何其他应用程序没有什么不同。也就是说，处理路由器参数的最佳方式是订阅路由器，因为这可以让您对参数更改做出反应在组件实例化之后，因为您不能依赖在组件上仅使用一个参数实例化一次。
你在想的是用相同的参数调用 router.navigate[...] 到你当前的、已经加载的位置：这没有任何作用。

标签： angular typescript angular-router angular4-router

【解决方案1】：

正式化我的评论：如果您使用浏览器的刷新/重新加载，或 Location.reload() 刷新 Angular 应用程序上的任何页面，您确实要再次运行 ngOnInit()，以及所有其他 life-cycle hooks。

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

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

您稍后评论中的措辞“进入同一条路线”假定已经一条已知路线。没有，因为应用程序完全重新引导。

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

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

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

【讨论】：

非常感谢您的详细描述和帮助。
@RidelHernándezInfante 我的荣幸。