介绍
Angular 应用在如今非常常见。它们是基于 Single Page Applications (SPA) 的概念构建的。在此类应用中，由于使用了组件，跨网页的路由与传统网站不同。在 Angular 中，您需要使用 RouterLink 进行导航以在应用中进行路由。RouterLink 是一个指令，它提供了 Router.navigate 和 Router.navigateByURL 方法来在组件类之间进行导航。
在本教程中，我们将 探讨 RouterLink, Router.navigate, 和 Router.navigateByURL 以及代码 示例.
RouterLink
在 HTML 中，链接通常使用锚点标签插入 <a> ，如下所示：
|
1 2 3 |
<a href="/sample"> HTML 链接示例。 </a> |
此示例链接将引导用户跳转到 /sample 页面。然而，如上所述，单页面应用 (SPA) 没有不同的页面可供链接。相反，它有不同的视图或组件展示给用户。
如果您需要允许用户进行导航并更改视图，则必须使用 RouterLink 指令，而不是 href:
|
1 2 3 |
<a routerLink="/users/example"> 使用字符串的链接。 </a> |
这个 RouterLink 示例将引导用户跳转到位于 /users/example 的组件。不同的 URL 片段也可以像以下示例一样在数组中传递：
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> 一个示例关于 一个 链接带有一个数组. </a> |
这两个示例的格式不同，但仍会被引导至位于 /users/example.
-
相对路径
RouterLink 允许指定相对 URL。我们可以使用 ../ 来返回到更高级别的导航。以下是我们的实现方式：
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> 向上返回一级的链接。 </a> |
在上面的示例中，如果用户位于 /users/posts，导航将带用户前往 /posts/parent。您还可以使用 ./, ../，或者如果需要，甚至可以不带前导斜杠。
-
参数
在某些场景下，您可能需要在路由之间传递数据。一个简单的例子是，当用户填写表单时，您引导他进入表单的下一部分以获取更多详细信息。
要传入参数，可以在 URL 片段列表中传递一个封装了数据的对象：
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> 带参数的链接。 </a> |
在上方， Router 将导航至 /users;display=sample/xyz.
-
命名出口
命名路由出口简单来说就是带有名称的路由出口。让我们来看看相关的代码：
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> 带有侧边出口的链接。 </a> |
在该示例中， xyz 片段将被放置在名为 side 的出口中。我们还可以像下面这样指定多个命名出口：
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> 带有第一和第二出口的链接。 </a> |
这将把 first 片段替换为 abc，并将 second 片段替换为 xyz.
Router
在 Angular 中， Router 类用于定义路由并在它们之间进行导航。这可以通过两种方法来实现： Router.navigate 和 Router.navigateByUrl。这两种方法都返回一个 promise。这个 promise 可以有三个值： true, false，或 null.
-
值为 true，当导航成功时。
-
值为 null，当没有导航时。
-
以及 false，如果由于某种原因导航失败。
如果您想在应用程序中使用这些方法，首先需要导入 Router 类到您的组件类中：
|
1 |
import { Router } from '@angular/router'; |
接下来，您需要在构造函数中将此 Router 注入到依赖项中：
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
完成此设置后，您就可以在应用程序中使用 Router.navigate 和 Router.navigateByUrl 方法了。
Router.navigate
该 Router.navigate 方法接受一个 URL 片段数组。让我们来看一个 Router.navigate 代码的基本示例：
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
最后，让我们来看看 Router.navigateByUrl。此方法类似于 Router.navigate，但它不接受 URL 片段，而是接受一个指定 URL 的字符串。此导航必须是绝对的，并且开头必须有 / 在开头：
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
上述代码将把用户导航到 /users;all=true 页面。
结论
在本教程中，我们学习了如何使用 RouterLink 在 Angular 应用中进行导航。由于是单页面应用，Angular 应用中的路由与传统 Web 应用程序略有不同。了解 RouterLink 及其功能可以帮助开发人员构建健壮的路由。
Angular 应用使用 Node.js 作为其运行时。如果您想了解更多关于 Node.js 以及如何部署 Node.js 应用程序的信息，可以参考以下教程：
- 如何在 Ubuntu 18.04 上安装 Node.js
- 设置 Node.js 应用程序：如何在 Ubuntu 20.04 上使用 Node.js 执行生产任务
- 如何使用 Docker 在 Ubuntu 20.04 上部署 Node.js (Express.js) 应用
祝您编程愉快！
评论
暂无评论。发表第一条评论吧。