angular - Angular - 主机监听器/UnloadNotification - 即使确认被拒绝，历史仍然会改变

Question

我在一个 Angular 9 项目中工作。我有一个表单，如果用户对表单有未保存的更改并尝试导航，我想提醒他们。对于我的路由器导航，我使用了一个基本的 CanDeactive Route Guard，但是当用户尝试在我的路由器之外导航或使用浏览器操作（通过使用后退/前进按钮、刷新或输入新 url）时，我需要使用 HostListener 来提醒他们进入浏览器的 url 输入）。我用这个：

@HostListener("window:beforeunload", ["$event"])
  unloadNotification($event: any) {
    if (this.myForm?.dirty) {
      $event.returnValue = true;
    }
  }

它似乎按预期工作，除了我注意到一个奇怪的小错误。如果表单很脏，并且我尝试导航，则会提示我（如预期的那样）。如果我取消提示（取消导航），我会留在原地（似乎没有导航发生，这是预期的）。

但是，前进按钮变为启用状态，并且现在有前进历史状态的历史。事实上，它甚至似乎删除了最后一个历史状态，即使导航被取消。

这里有更多的深度：如果我去过以下路线（按顺序）： /tab1, /tab2, /tab3, /tab4, /myFormPage

然后我对表单进行更改（在/myFormPage路线上）并尝试导航，我得到了提示。我可以在 URL 中看到尝试导航到/tab4. 如果我取消提示，我不会被导航，但我的前进按钮会启用并且背后有历史记录。如果我再次尝试导航，则尝试的导航 url 将是 to /tab3，而预期它将是 to ./tab4，因为它之前被取消了。

基本上，我认为即使通过 HostListener 阻止导航（如果用户取消提示），历史记录仍在被更改。我该如何解决这个问题？有没有办法向浏览器发出我不想更改历史记录的信号，或者我必须手动进行。

这发生在 chrome、firefox 和 safari 中。

我做了一个stackblitz，您可以在其中查看此问题：https ://stackblitz.com/edit/routing-angular-lx5wwh

标签： angulargoogle-chromebrowserrouterangular9