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

问题描述

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

应用程序组件有一个非常简单的代码：

embed = discord.Embed()
file = discord.File(path_to_your_file,filename="image.png")
embed.set_image(url="attachment://image.png")
await ctx.send(embed=embed,file=file)

它的html也很简单：

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

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

它起作用了，因此，如果我在任何浏览器中使用<a href="https://angular.io">Bring me to external URL</a> 在本地运行该应用程序。

但是，如果我使用ng serve构建应用程序，进行部署（例如，使用a command-line http server）并在Firefox中打开它，则看起来会有所不同。加载应用程序时，控制台上仍显示“ OnInit”。但是，当我单击链接并返回时，什么也没有发生。未达到OnInit内部的代码。看起来组件或整个页面都没有重新加载，FF呈现了先前的状态。

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

我还检查了应用程序内部的导航。它完全适合内部URL的任何地方。

您能告诉我为什么会发生这种情况以及如何在Firefox中获取OnInit吗？

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

解决方法

此问题是由于当您从外部网址“返回”应用程序时，Angular没有运行生命周期挂钩所致。

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

    // Handle stuff

    }
}

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