使用 Angular 路由器编辑浏览器的历史记录 API

Question

我有一个应用程序，我们在其中构建了一系列 ID 均为 0 的临时数据点。我通过将它们键入 01、02、03 等来单独引用所有这些点。我的路线是 /details/:id.如果用户保存这些数据点之一，我们的 API 会创建一个真实 ID。所以这个过程对用户来说看起来像这样：

转到 /details/0123

处的临时项目

保存对项目 0123 的更改。

在响应中收到 ID 为 456 的新项目。

Angular 重新路由到 /details/456，用户不会注意到转换，除非他们注意 URL。

但是，如果用户点击浏览器上的后退按钮，他们将转到 /details/0123。

问题： 我可以通过 Angular 路由器（或其他一些可靠的方式）编辑浏览器历史记录以防止导航到 /details/0123 吗？

Answer 1

我会做的是使用 Angular 的位置并订阅 popstate。像这样：

import {Subscription} from 'rxjs/Subscription';

export class ABC implements OnDestroy {
location: Location;
private subscription: Subscription;

      constructor(location: Location, router: Router) {
        this.subscription = location.subscribe(val => this.router.navigate(/*anywhere*/)
      }
      ngOnDestroy(){
          this.subscription.unsubscribe() //Make sure you do this :)
      }
}

我认为这对你有用。让我知道。

Answer 2

您可以通过在 NavigationExtras.

中添加 replaceUrl: true 来将浏览器历史记录中的路由 /details/0123 替换为路由 /details/456

示例：

this.router.navigate(['/details/456'], { replaceUrl: true });

使用 Angular 路由器编辑浏览器的历史记录 API

Edit browser's history API with Angular router

angular

angular-router