Angular router.navigate（）delta

Question

如手册中所述， router.navigate接受delta，但是手册但是不够具体：

根据提供的命令数组和起点进行导航。 如果没有提供起始路线，则导航是绝对的。

...

与navigateByUrl相反，navigation始终采用应用于当前URL的增量。

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

Answer 1

它只是应用相对URL还是更复杂的东西？

它是根据您通过commands参数提供的部分构建的相对URL，并考虑了您在extras传递的其他参数（ NavigationExtras对象 ）。

例如，您可以使用relativeTo从活动路由或根路由导航。 您可以为导航到的URL设置查询参数或片段（ queryParams和fragment在extras中），或者您可以保留当前URL中存在的查询参数（ queryParamsHandling中的queryParamsHandling ）。

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

那么在绝对导航的情况下，它指的是什么样的三角洲呢？

对于相对和绝对导航，它是相同的 - 增量是应用于当前路径（相对）的一组更改（ commands ）或应用于根路径（绝对）以将应用程序转移到新状态（仅提供新的URL通过navigateByUrl ）。

在简单的情况下，如果您执行类似this.router.navigate(['/heroes'])它实际上与使用navigateByUrl没有什么不同，但请考虑这些示例（请参阅createUrlTree ，它实际上将commands和extras转换为最终网址）：

// 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提供的自己的工具）。

Answer 2

在相对模式下，delta应用于当前路线。 它使用此代码本机调用navigateByUrl

/**
   * Navigate based on the provided array of commands and a starting point.
   * If no starting route is provided, the navigation is absolute.
   *
   * Returns a promise that:
   * - resolves to 'true' when navigation succeeds,
   * - resolves to 'false' when navigation fails,
   * - is rejected when an error happens.
   *
   * ### Usage
   *
   * ```
   * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
   *
   * // Navigate without updating the URL
   * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
   * ```
   *
   * In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current
   * URL.
   */
  navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}):
      Promise<boolean> {
    validateCommands(commands);
    return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
  }

源代码中包含了许多示例https://github.com/angular/angular/blob/master/packages/router/src/router.ts