router.navigate与router.navigateByUrl

Question

https://angular.io/api/router/RouterLink很好地概述了如何创建链接，将用户带到Angular4中的不同路径，但是我找不到如何以编程方式执行相同的操作而不需要用户单击链接

Answer 1

navigateByUrl

像这样使用的

routerLink指令：

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

只是使用router及其navigateByUrl方法进行命令式导航的包装：

router.navigateByUrl('/inbox/33/messages/44')

从消息来源可以看出：

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

因此，无论您需要将用户导航到其他路线，只需注入router并使用navigateByUrl方法：

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

两者之间的差异

使用router.navigateByUrl类似于更改位置栏   直接 - 我们提供“整体”新网址。而   router.navigate通过应用传入数组来创建新的URL   命令，补丁，到当前URL。

要清楚地看到差异，请想象当前的URL是   '/inbox/11/messages/22(popup:compose)'。

使用此URL，调用   router.navigateByUrl('/inbox/33/messages/44')会导致   '/inbox/33/messages/44'。但是称之为   router.navigate(['/inbox/33/messages/44'])会导致   '/inbox/33/messages/44(popup:compose)'。

在the official docs中阅读更多内容。

Answer 2

据我了解，router.navigate用于相对于当前路径进行导航。例如：如果我们当前的路径是 abc.com/user ，那么在这种情况下，我们想导航到URL： abc.com/user/10 ，我们可以使用router.navigate。

router.navigateByUrl（）用于绝对路径导航。

即

如果在这种情况下需要导航到完全不同的路线，则可以使用router.navigateByUrl

例如，如果我们需要从 abc.com/user 导航到 abc.com/assets ，在这种情况下，我们可以使用router.navigateByUrl（）

语法：

router.navigateByUrl（'----字符串----'）;

router.navigate（[]，{relativeTo：route}）

Answer 3

除了提供的答案外，navigate还有更多详细信息。从功能的评论：

/**
 * 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.
 */

Router Guide有关于程序化导航的更多详细信息。

Answer 4

router.navigate与router.navigateByUrl

router.navigate只是包装router.navigateByUrl的一种便捷方法，归结为：

navigate(commands: any[], extras) {
    return router.navigateByUrl(router.createUrlTree(commands, extras), extras);
}

如其他答案所述，router.navigateByUrl仅接受绝对URL：

// This will work
router.navigateByUrl("http://localhost/team/33/user/11")
// This WON'T work even though relativeTo parameter is in the signature
router.navigateByUrl("../22", {relativeTo: route})

所有相关计算均由router.createUrlTree和router.navigate完成。数组语法用于将每个数组元素都视为修改“命令”的URL。例如。 ".."-上升，"path"-下降，{expand: true}-添加查询参数，等等。您可以像这样使用它：

// create /team/33/user/11
router.navigate(['/team', 33, 'user', 11]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.navigate(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.navigate(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.navigate(['../../team/44/user/22'], {relativeTo: route});

该{relativeTo: route}参数很重要，因为这就是路由器将用作相对操作的根。

通过组件的构造函数获取它：

  // In my-awesome.component.ts:

  constructor(private route: ActivatedRoute, private router: Router) {}
  
  // Example call
  onNavigateClick() {
    // Navigates to a parent component
    this.router.navigate([..], { relativeTo: this.route })
  }

routerLink指令

此指令最有趣的是它将为您检索ActivatedRoute。在后台使用已经很熟悉的

router.navigateByUrl(router.createUrlTree(commands, { relativeTo: route }), { relativeTo: route });

以下变体将产生相同的结果：

[routerLink]="['../..']"

// if the string parameter is passed it will be wrapped into an array
routerLink="../.."

如何在Angular中使用router.navigateByUrl和router.navigate

4 个答案:

navigateByUrl

导航

两者之间的差异

router.navigate与router.navigateByUrl

routerLink指令