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

Question

我根据Routing Angular文档和其中的实时演示创建了一个测试用例来重现我所看到的问题.

现场演示略有修改,以便请求浏览器桌面通知,并在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的内部.这是真的发生了什么？这是某种角虫吗？

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

在我自己的成熟应用程序中,行为略有不同.在ngOnInit()没有得到最终调用,但它组件的构造函数执行后需要长达10秒.在等待期间,浏览器似乎闲置不使用CPU.

我很困惑.有任何想法吗？单击按钮时路由如何正常工作但是当从浏览器桌面通知的单击处理程序使用时,它会演示这种奇怪的行为？

请注意,我已经测试了最新的Chrome(67.0.3396.87),Firefox(60.0.2)和Edge(所有这些都在Windows 10上进行了最新更新).

Answer 1

我不知道为什么,但是这个方法是在Angular Zone之外运行的.这就是为什么网址正在改变但是Angular没有检测到它因此ngOnInit没有被调用.请注意,它会在您单击清除消息按钮时运行.您可以通过在区域中运行它来简单地修复它:

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

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

}