浏览器后退按钮上的 HostListener 在 Angular 中触发两次答案

【问题标题】：HostListener on browser back button fires twice in Angular浏览器后退按钮上的 HostListener 在 Angular 中触发两次
【发布时间】：2021-01-03 13:56:15
【问题描述】：

我在路由 Angular 应用程序中有一个 @HostListener，如果您单击浏览器上的后退按钮，它只会询问您是否希望离开您所在的页面。在对话框中单击“确定”时，会弹出另一个对话框再次询问您。所以我只能假设事件是处理程序被触发了两次。

@HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event: Event) {
    // If we can go back...
    if (this.canGoBack) {
      alert('Are you sure you want to go back and exit the review?');
    }
  }

这是 Angular 中的错误还是由于路由机制导致的正常行为？有没有办法解决这个问题？或者解决它？或者，当您单击后退按钮时，也许 Angular 有更好的方法来做某事？

【问题讨论】：

我试图重现它，但我不能，只显示 1 个对话框。您的代码中必须有其他内容对此负责。
你有带路由的应用吗？
是的，我用的是带路由的。

标签： angular typescript

【解决方案1】：

HostListner 只是报告事件，所以可能页面被推送/堆叠了两次/多次，我猜没有看到你们其余的代码，它要么

通过导航
通过代码
或路由器/插座

看here，其他人也发生了同样的事情。因此，请尝试查看堆栈和导航菜单/路由器控件。 This 应该能帮到你！

【讨论】：