首页 文章

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

提问于
浏览 次
3

我创建了一个 test case 来重现我看到的基于Routing Angular documentation和其中发现的live demo的问题 .

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

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

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

要重现此问题，请确保 Open in New Window 并允许该应用在出现提示时显示桌面通知 . 授予权限后，将立即显示通知 . 单击通知后，您将注意到路由器导航到新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上进行了最新更新） .

angular angular-routing

2 回答

  • 5

    我'm not sure why, but the method is ran outside the Angular Zone. That is why the url is changing but Angular doesn' t检测到它所以没有调用 ngOnInit . 请注意，它会在您单击清除消息按钮时运行 . 您可以通过在区域中运行它来简单地修复它：

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

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

}
    回复于
  • -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 {}

    您的路线/组件是懒散还是急切地加载？

    回复于

相关问题