来自浏览器桌面通知点击事件的 Angular 6 路由产生意外行为

Question

我创建了一个 test case 根据 Routing Angular documentation 重现我看到的问题和 live demo在其中找到。

现场演示稍作修改，以便请求浏览器桌面通知，并在 app.component.ts 中显示一个简单的通知 [浏览器通知代码是从某处粘贴的]。

请注意下面通知的 onclick 处理程序。它只是记录到控制台并导航到应用程序的原始路由之一。

notification.onclick = function () {
        console.log('onclick');
        self.router.navigate(['/heroes']);
      };

要重现该问题，请确保在新窗口中打开 并允许该应用在出现提示时显示桌面通知。授予权限后将立即显示通知。单击通知后，您会注意到路由器导航到新 URL，但未呈现任何内容。控制台输出按预期显示“onclick”，但没有显示 ngOnInit()。 heroes.component.ts 也被修改为输出 ngOnInit() 如下所示，但这从未发生过。如果您单击 Heroes 按钮，ngOnInit() 将按预期工作。

ngOnInit() {
  console.log('ngOnInit');
  this.getHeroes();
}

经过一些调试后发现路由器按预期导航，heroes 组件被实例化(当构造函数被调用时)但是 ngOnInit() 永远不会执行.

浏览器桌面通知的 onclick 上下文似乎以某种方式搞砸了 Angular 的内部结构。这是真的吗？这是某种 Angular 错误吗？

我也尝试过使用 ng-push但观察到相同的行为。

在我自己的成熟应用程序中，行为上存在细微差别。 ngOnInit() 最终会被调用，但在组件的构造函数执行后最多需要 10 秒。在等待期间，浏览器似乎闲置不消耗任何 CPU。

我很困惑。有任何想法吗？为什么单击按钮时路由正常工作，但在浏览器桌面通知的单击处理程序中使用时却表现出这种奇怪的行为？

请注意，我已经在最新的 Chrome (67.0.3396.87)、Firefox (60.0.2) 和 Edge(均在 Windows 10 上进行了最新更新)中进行了测试。

Answer 1

我不确定为什么，但该方法在 Angular Zone 之外运行。这就是为什么 url 正在改变但 Angular 没有检测到它所以 ngOnInit 没有被调用的原因。请注意，例如，当您单击清除消息按钮时它会运行。您可以通过在区域中运行它来简单地修复它:

notification.onclick = () => {
    this.zone.run(() => {
        console.log('onclick');
        this.router.navigate(['/heroes']);
    });
};

constructor(private router: Router, private zone: NgZone) {

}