时间戳

首页 > 解决方案 > 在 Location.go() 之后，History.back() 不会触发 ActivatedRoute.paramMap

angular - 在 Location.go() 之后，History.back() 不会触发 ActivatedRoute.paramMap

问题描述

考虑这个 URL：

http://localhost:4200/items

在我的 GUI 中打开（扩展）元素时，我使用Location.go() 更新 URL ：

http://localhost:4200/items;openedId=123

当我点击后退按钮时，URL 变回http://localhost:4200/items，但我对 ActivatedRoute.paramMap 的订阅没有被触发。（因此我的项目保持打开状态）

奇怪的是，当我连续打开两个元素，然后回击两次时触发：

Open main page -> http://localhost:4200/items
Open item 123  -> http://localhost:4200/items;openedId=123
Open item 456  -> http://localhost:4200/items;openedId=456

Back to http://localhost:4200/items;openedId=123 -> ActivatedRoute.paramMap triggered
Back to http://localhost:4200/items -> ActivatedRoute.paramMap triggered (!)

为什么不是第一次触发？为什么我需要有两个历史条目才能工作？我很困惑。

更新：这就是我监听 paramMap 变化的方式：

  public ngOnInit() {

    this.subscriptions.add(this.activatedRoute.paramMap.subscribe(paramMap => {
      this.handleNavigation(paramMap);
    }));
}

标签： angularangular-routingbrowser-history

解决方案

我遇到了同样的问题，我想这是因为路由器不知道location.go()导航。因此，location.go()将位置 url 更改为http://localhost:4200/items;openedId=123但路由器当前 url 仍然是http://localhost:4200/items. 当您按下返回时，路由器会忽略该事件，因为“返回”url 与当前路由器 url 匹配。如果您调用location.go()两次并返回，则backurlhttp://localhost:4200/items;openedId=123与路由器 url 不匹配，因此paramMap被触发。

一种解决方法可能是向 url 添加一些唯一的参数，例如当前时间戳，我尝试过并且它有效，但它绝对不是最好的解决方案。我最终使用Route.navigate()而不是location.go(). 如果你想过滤一些导航，可以通过将状态传递给navigate方法，之后你可以通过Router.getCurrentNavigation()访问状态来过滤导航。

问题是位置不是为更改路线而设计的，服务文档告诉：

最好使用 Router#navigate 服务来触发路由更改。仅当您需要与路由之外的规范化 URL 交互或创建规范化 URL 时才使用位置。

推荐阅读