链接调用 Angular 的 router.navigate() 关于查询参数的行为

Question

在链接对 Angular 路由器的 navigate() 函数的调用时，我运行遇到了一些令人困惑的行为。我的用例是一个大型应用程序，它在 URL 中更新其部分状态，其中有几个服务负责管理它们的状态。

因此，我们可能会在同一个 zone.js 执行中多次调用 navigate([], {queryParams: ..., queryParamsHandling: 'merge'}) window。

虽然这通常工作正常，但我运行在中间提供路由器命令时出现奇怪的行为，例如 the following stackblitz example:

this.router.navigate([], { queryParams: {} }); // <-- [1]

this.router.navigate([], { // <-- [2]
  queryParams: { foo: "fooValue", bar: "barValue" },
  queryParamsHandling: "merge"
});

this.router.navigate(["some"]); // <-- [3]

this.router.navigate([], { // <-- [4]
  queryParams: { foo: "newFooValue", baz: "bazValue" },
  queryParamsHandling: "merge"
});

我对这个的期望是{foo: 'newFooValue', bar: 'barValue', baz: 'bazValue'}，但是看起来对路由器的第二次调用被简单地丢弃了，因为bar参数永远不会传播.

将 { queryParamsHandling: "merge" } 添加到第三次调用不会改变此行为，与 "preserve" 相同。

如何将此类调用链接到路由器并获得预期结果？我需要在 setTimeout 中推迟我的 this.router.navigate 通话吗？

Answer 1

我不是在开玩笑，但我认为如果您需要一个接一个地执行承诺，则需要将它们链接起来。像

  triggerChainedNavigation() {
    console.log("Beginning chained navigation");
    const firstRouting = () =>
      this.router.navigate([], {
        queryParams: { foo: "fooValue", bar: "barValue" },
        queryParamsHandling: "merge"
      });

    const secondRouting = () => {
      this.router.navigate(["some_route"], {
        queryParamsHandling: "preserve"
      });
    };
    const thirdRouting = () => {
      this.router.navigate([], {
        queryParams: { foo: "newFooValue", baz: "bazValue" },
        queryParamsHandling: "merge"
      });
    };
    this.router
      .navigate([], { queryParams: {} })
      .then(firstRouting)
      .then(secondRouting)
      .then(thirdRouting);
  }

见this Demo

链接调用 Angular 的 router.navigate() 关于查询参数的行为

Chained calls to Angular's router.navigate() behavior regarding query parameters

typescript

angular-ui-router

angular