Angular 10：使用浏览器的后退按钮从外部 URL 导航回来时，ngOnInit 未在 Firefox 中部署的应用程序版本中触发

Posted 2023-03-15

【中文标题】Angular 10：使用浏览器的后退按钮从外部 URL 导航回来时，ngOnInit 未在 Firefox 中部署的应用程序版本中触发

【英文标题】：Angular 10: ngOnInit not firing in the deployed app version in Firefox when navigating back from the external URL with browser's back button

【发布时间】：2020-12-29 03:26:37

【问题描述】：

我发现已部署的 Angular 应用程序的生命周期在 Firefox 中看起来不同。

应用组件有一段非常简单的代码：

export class AppComponent implements OnInit 
  public ngOnInit(): void 
    console.log('OnInit');
  

它的html也很简单：

<a href="https://angular.io">Bring me to external URL</a>

我预计会出现以下情况。用户打开应用程序，在控制台中看到“OnInit”，通过链接导航，单击后退按钮并在控制台中看到新的“OnInit”消息（如果保留日志，则会看到第二条消息）。

如果我在任何浏览器中使用ng serve 在本地运行应用程序，它就可以工作。

但是如果我使用ng build --prod 构建应用程序，部署它（例如使用a command-line http server）并在Firefox 中打开它，它看起来会有所不同。加载应用程序时，我仍然看到控制台中出现“OnInit”。但是当我单击链接并返回时没有任何反应。未达到 OnInit 内部的代码。看起来组件或整个页面没有重新加载，FF 呈现之前的状态。

它会导致一些令人讨厌的问题。例如，当用户从第三方 OAuth 登录页面返回时，他们会看到上一个屏幕的错误状态。

我还检查了应用程序内部的导航。它完美地适用于内部 URL。

您能否向我解释一下为什么会发生这种情况以及如何在 Firefox 中获取 OnInit？

我找到了类似的thread on GitHub。但 Angular 团队并不认为这是框架的问题。

【问题讨论】：

这可能会帮助你***.com/questions/47512979/…

【参考方案1】：

当您从外部 URL“返回”到您的应用程序时，Angular 没有运行生命周期挂钩导致该问题。

@HostListener("document:visibilitychange", ["$event"])
handleVisibilityChange(event: any): void 

    // Handle stuff

    

来自Why don't lifecycle hooks run when changing tabs in my app?的代码