介绍
在 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。文章来源：https://www.toymoban.com/news/detail-832513.html
如果您想了解更多关于Angular的信息，请查看我们的Angular主题页面，了解练习和编程项目。文章来源地址https://www.toymoban.com/news/detail-832513.html
到了这里，关于Angular 路由器：使用 RouterLink、Navigate 或 NavigateByUrl 进行导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
