Angular 路由器：使用 RouterLink、Navigate 或 NavigateByUrl 进行导航

介绍

在 Angular 中，RouterLink 是一个用于以声明方式导航到不同路由的指令。Router.navigate 和 Router.navigateByURL 是 Router 类中可用的两种方法，用于在组件类中以命令方式导航。

让我们来探讨如何使用 RouterLink、Router.navigate 和 Router.navigateByURL。

使用 RouterLink

HTML 中的典型链接如下所示：

<a href="/example">
  Example HTML link.
</a>

这个示例链接将用户引导到 /example 页面。

然而，单页面应用程序（SPA）没有不同的页面可供链接。相反，它有不同的 视图 可以展示给用户。为了允许用户导航和更改视图，您将希望使用 RouterLink 指令而不是 href：

<a routerLink="/users/sammy">
  Link that uses a string.
</a>

这个 RouterLink 示例将用户引导到 /users/sammy 组件。

不同的 URL 段也可以像这样以数组的形式传递：

<a [routerLink]="['/', 'users', 'sammy']">
  Link that uses an array.
</a>

这两个示例格式不同，但将引导到相同的 /users/sammy 组件。

相对路径

您可以使用 '../ 来在导航中向上移动到更高级别，使用类似以下的内容：

<a [routerLink]="['../', 'posts', 'sammy']">
  Link that goes up a level.
</a>

在这个示例中，如果用户在 /users/sammy，导航将变为 /posts/sammy。

可以在第一个 URL 段之前加上 ./、../ 或没有前导斜杠。

参数

您可以通过在 URL 段列表中传递对象来传递参数到导航中：

<a [routerLink]="['/', 'users', {display: 'verbose'}, 'sammy']">
  Link with parameter.
</a>

在这个示例中，Router 将导航到 /users;display=verbose/sammy。

命名出口

您可以告诉 Router 在命名的 outlet 中放置什么，类似以下的内容：

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">
  Link with a side outlet.
</a>

在这个示例中，sammy 段将被放置在名为 side 的 outlet 中。

也可以告诉 Router 在多个命名的 outlet 中放置什么，类似以下的内容：

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">
  Link with a side and footer outlets.
</a>

在这个示例中，sammy 段将被放置在名为 side 的 outlet 中，而 sharks 段将被放置在名为 footer 的 outlet 中。

使用 Router

在 Angular 的 Router 类中有两种方法可供在组件类中以命令方式导航：Router.navigate 和 Router.navigateByUrl。这两种方法都返回一个 promise，如果导航成功则解析为 true，如果没有导航则解析为 null，如果导航失败则解析为 false，如果出现错误则完全被拒绝。

要使用其中任何一种方法，首先要确保 Router 类被注入到您的组件类中。

首先，将 Router 导入到您的组件类中：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

然后，将 Router 添加到依赖项中：

@Component({
  // ...
})
export class AppComponent {
  constructor(private router: Router) {
    // ...
  }
  // ...
}

现在，您可以使用 Router.navigate 或 Router.navigateByUrl。

Router.navigate

您可以将 URL 段的数组传递给 Router.navigate。

以下是使用 Router.navigate 方法的基本示例：

goPlaces() {
  this.router.navigate(['/', 'users']);
}

以下是演示 Router.navigate 如何 thenable 的示例：

goPlaces() {
  this.router.navigate(['/', 'users'])
    .then(nav => {
      console.log(nav); // 如果导航成功则为 true
    }, err => {
      console.log(err) // 当出现错误时
    });
}

在这个示例中，如果 Router.navigate 成功，它将显示 true。如果 Router.navigate 失败，它将显示一个错误。

Router.navigateByUrl

Router.navigateByUrl与Router.navigate类似，不同之处在于传入的是字符串而不是URL片段。导航应该是绝对的，并以/开头。

以下是使用Router.navigateByUrl方法的基本示例：

goPlaces() {
  this.router.navigateByUrl('/users;display=verbose/sammy');
}

在这个示例中，Router.navigateByUrl将导航到/users;display=verbose/sammy。

结论

在本文中，您了解了Angular应用程序中的导航。您已经了解了RouterLink、Router.navigate和Router.navigateByURL。

如果您想了解更多关于Angular的信息，请查看我们的Angular主题页面，了解练习和编程项目。