Angular router.navigate() 增量

Question

如手册中所述，router.navigate 接受增量，但手册对此不够具体:

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

...

In opposite to navigateByUrl, navigate always takes a delta that is applied to the current URL.

它只是应用一个相对 URL 还是更复杂的东西？那么在绝对导航的情况下，它指的是什么样的delta呢？

Answer 1

Does it just apply a relative URL or something more complex?

这是一个相对 URL，它是根据您通过 commands 参数提供的部分构建的，并考虑了您在 extras 中传递的其他参数(NavigationExtras object)。

例如，您可以使用 relativeTo 从事件路由或根路由导航。您可以为导航到的 URL 设置查询参数或片段(queryParams 和 fragment in extras)，或者您可以保留当前 url 中存在的查询参数(queryParamsHandling in extras).

等等，所以一般来说，它实际上比我们动态构建 URL 时的 URL 导航更复杂。

What kind of delta does it refer to in case of absolute navigation then?

相对导航和绝对导航是一样的 - delta 是应用于当前路由(相对)或根路由(绝对)以传输应用程序的更改集(命令)到新状态(与仅通过 navigateByUrl 提供新 URL 相比)。

在简单的情况下，如果您执行类似 this.router.navigate(['/heroes']) 的操作，它实际上与使用 navigateByUrl 没有太大区别，但请考虑这些示例(参见 createUrlTree，它实际上将 commands 和 extras 转换为最终 URL):

// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);

// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

因此，即使对于绝对导航，navigate 方法也提供了一组额外的工具来动态构建 URL。您可以使用 navigateByUrl 执行此操作，但您可能会使用字符串解析/连接/执行其他操作(或者开发自己的工具，类似于 navigate 和 createUrlTree 提供)。