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

Question

我在其中创建了一个 test case to reproduce the issue I am seeing based on Routing Angular documentation and the live demo。

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

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

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

要重现该问题，请确保 在新窗口中打开 Window 并允许应用程序在出现提示时显示桌面通知。授予权限后将立即显示通知。单击通知后，您会注意到路由器导航到新的 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

这个例子也适用于我。

首先，尝试在路由中启用散列，以消除由错误配置的 Web 主机引起的路由问题。您可以在您的主要路由配置中执行此操作：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
  exports: [RouterModule]
})
export class AppRouting {}

如果这不能解决您的问题，您应该启用路由器跟踪，希望它能帮助您找出问题的根源：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      enableTracing: true
    })
  ],
  exports: [RouterModule]
})
export class AppRouting {}

您的 Route/Component 是延迟加载还是急切加载？

Answer 2

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

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

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

}

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

Angular 6 routing from browser's desktop notification click event yields unexpected behavior

angular-routing

angular