Angular 应用程序在浏览器返回单击时跳过其中一个页面答案

【问题标题】：Angular app skip one of the pages while browserback clickAngular 应用程序在浏览器返回单击时跳过其中一个页面
【发布时间】：2021-11-18 21:10:22
【问题描述】：

我有一个组件 before-adetail，它有一个到另一个组件 a-detail 的链接，该组件又有一个到 a-review 的链接其中又包含一个指向 a-confirm 的链接。

所以流程是before-detail->a-detail->a-review->a-confirm

before-adetail.component.html：

<p>before-adetail works!</p>
<a routerLink="/detail">A-detail</a>

详细信息：

<p>a-detail works!</p>
<a routerLink="/review">A-review</a>

评论：

<p>a-review works!</p>
<a routerLink="/confirm">A-confirm</a>

确认：

<p>a-confirm works!</p>

所以当我第一次运行应用程序时，新标签会存储在历史记录中。假设我在 localhost:4200 上运行应用程序。然后，当我点击 before-adetail 中的链接时，这也会存储在历史记录中等等。

如果我从 a-review 页面按浏览器返回按钮，它会返回 a-detail 页面，如果我再次按返回按钮，它会返回到细节之前。

但我想要实现的是，如果我访问过 a-review 并按下返回按钮，它应该转到 a-detail 并且当我再次按下返回时不应该去before-adetail，而是历史中在那之前的任何页面。

只有当我访问过 a-review 页面时，我才需要此功能，如果我没有，它应该可以正常工作。

我如何做到这一点？

我现在尝试过的： a-review.component.ts

内部

location.onPopState(() => {
      const temporaryUrl = window.location.href;
      const url = temporaryUrl.replace('/review', '/detail');
      history.pushState('a-review', '', url);
    });
  }

通过a-review知道浏览器已经从a-review页面点击返回

在a-detail.component.ts

里面

location.onPopState(() => {
      if (history.state === 'a-review') {
        history.go(-2);
      }
    });
  }

这确实实现了我想要做的事情，但是对于像 1 秒或 2 秒这样的瞬间，即使是 before-adetail 页面也是可见的，这是我不想要的。

有什么方法可以改善这一点，或者有什么其他更好的方法可以做到这一点？谢谢。

【问题讨论】：

标签： angular browser-history popstate

【解决方案1】：

我建议你使用 replaceUrl

<p>a-review works!</p>
<a routerLink="/confirm" [replaceUrl]="true">A-confirm</a>

当您点击“A-confirm”时，当前的历史状态（'/review' 路径）将被替换为 '/confirm' 之一。而“返回”按钮将直接带您返回“/detail”

【讨论】：