Angular router.navigate()delta

时间:2017-07-20 11:17:28

标签: angular angular2-routing

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

  

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

     

...

     

与navigateByUrl相反,导航始终采用应用于当前URL的增量。

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

2 个答案:

答案 0 :(得分:7)

  

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

这是根据您通过commands param提供的内容构建的相对网址,并考虑了您在extrasNavigationExtras object)中传递的其他参数。

例如,您可以使用relativeTo从活动路由或根路由导航。 您可以为导航到的网址(queryParamsfragment添加额外内容中的查询参数或片段),也可以保留当前网址中存在的查询参数(queryParamsHandling。 )。

依此类推,所以一般而言,实际上,当我们动态构建URL时,它实际上比通过URL导航更复杂。

  

在绝对导航的情况下,它指的是什么类型的delta呢?

相对和绝对导航相同 - delta是应用于当前路径(相对)的更改集(commands)或应用于新路径(绝对)以将应用程序传输到新路径州(仅通过navigateByUrl提供新网址。)

在简单的情况下,如果您执行类似this.router.navigate(['/heroes'])的操作,它实际上与使用navigateByUrl没有什么不同,但请考虑这些示例(请参阅createUrlTree实际转换this 1}}和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}}]); 方法也提供了一组动态构建URL的附加工具。您可以使用navigate执行此操作,但您可能会使用字符串解析/连接/执行其他操作(或者开发类似于navigateByUrlnavigate提供的自己的工具)。

答案 1 :(得分: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