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

介绍

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

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

使用路由器链接

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 段将放置在 outlet 中命名为 footer。

使用路由器

Angular 的 Router 类有两种方法可以在组件类中进行命令式导航：Router.navigate 和 Router.navigateByUrl。两种方法都返回一个承诺，如果导航成功，则返回 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。

路由器导航

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

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

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

下面是一个示例，演示 Router.navigate 如何是 thenable：

goPlaces() {
  this.router.navigate(['/', 'users'])
    .then(nav => {
      console.log(nav); // true if navigation is successful
    }, err => {
      console.log(err) // when there's an error
    });
}

如果本例中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 主题页面以获取练习和编程项目。