介绍

在 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段将放置在outlet命名的side.

也可以用这样的东西告诉Router在多个命名的outlets 中放置什么：

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

在此示例中，sammy段将放置在outlet named 中side，而 sharks段将放置在outletnamed 中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 主题页面以获取练习和编程项目。