简介

在ANGLING中，RouterLink是导航到不同的ROUTE_DECLARATABLY_的指令。Router.Navigate和Router.NavigateByURL是Router类在组件类中导航_强制的两个方法。

我们来了解一下RouterLink、Router.Navigate和Router.NavigateByURL的使用方法。

使用RouterLink

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

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

此示例链接将把用户定向到/Example页面。

但是，单页面应用程序(SPA)没有要链接到的不同页面。相反，它有不同的_view_显示给用户。要允许用户导航和更改视图，您需要使用RouterLink指令，而不是href：

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

这个RouterLink示例将把用户定向到/USERS/sammy处的组件。

不同的URL段也可以在数组中传递，如下所示：

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

这两个示例的格式不同，但将定向到/USERS/sammy中的同一组件。

相对路径

您可以使用../在导航中转到更高级别，如下所示：

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

在该示例中，如果用户位于/USERS/sammy，则导航将变为/post/sammy。

可以在第一个URL段前面加上./、../或不加前导斜杠。

参数说明

您可以使用URL段列表中的对象将参数传递给导航：

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

在该示例中，Router将导航到/USERS；DISPLAY=Verbose/sammy。

命名Outlets

您可以使用如下内容告诉Router‘在命名的outlet`中放置什么内容：

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

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

还可以用如下内容来告诉Router‘在多个名为Outlet’中放置什么：

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

在本例中，sammy段将放置在名为side的outlet中，Sharks段将放置在名为footer的outlet中。

使用路由器

在ANGLE的Router类中，有两种方法可用于在组件类中进行强制导航：Router.Navigate和Router.NavigateByUrl。这两种方法都会返回一个Promise，如果导航成功，则解析为true；如果没有导航，则返回null；如果导航失败，则返回False；如果导航出错，则完全拒绝。

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

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

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

然后，在依赖项中添加Router：

 1@Component({
 2  // ...
 3})
 4export class AppComponent {
 5
 6  constructor(private router: Router) {
 7    // ...
 8  }
 9
10  // ...
11}

现在，您可以使用Router.Navigate或Router.NavigateByUrl。

路由器.导航

将URL段数组传递给Router.Navigate。

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

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

下面是一个演示Router.Navigate是_thable_的示例：

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

如果本例中Router.Navigate成功，则显示true。如果本例中Router.Navigate不成功，则会显示错误。

Router.NavigateByUrl

Router.NavigateByUrl类似于Router.Navigate，不同之处在于传入的是字符串而不是URL段。导航必须是绝对的，并且以/开头。

下面是一个使用Router.navigateByUrl方法的基本示例：

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

在本例中，Router.NavigateByUrl将导航到/USERS；DISPLAY=Verbose/sammy。

结论

在本文中，您了解了角度应用程序中的导航。您已经了解了RouterLink、Router.Navigate和Router.NavigateByURL。

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

Angular Router：使用 RouterLink、Navigate 或 NavigateByUrl 导航

简介