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

介绍

在 Angular 中,RouterLink 是一个用于以声明方式导航到不同路由的指令。Router.navigateRouter.navigateByURLRouter 类中可用的两种方法,用于在组件类中以命令方式导航。

让我们来探讨如何使用 RouterLinkRouter.navigateRouter.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 段将被放置在名为 sideoutlet 中。

也可以告诉 Router 在多个命名的 outlet 中放置什么,类似以下的内容:

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

在这个示例中,sammy 段将被放置在名为 sideoutlet 中,而 sharks 段将被放置在名为 footeroutlet 中。

使用 Router

在 Angular 的 Router 类中有两种方法可供在组件类中以命令方式导航:Router.navigateRouter.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.navigateRouter.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.navigateByUrlRouter.navigate类似,不同之处在于传入的是字符串而不是URL片段。导航应该是绝对的,并以/开头。

以下是使用Router.navigateByUrl方法的基本示例:

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

在这个示例中,Router.navigateByUrl将导航到/users;display=verbose/sammy

结论

在本文中,您了解了Angular应用程序中的导航。您已经了解了RouterLinkRouter.navigateRouter.navigateByURL

如果您想了解更多关于Angular的信息,请查看我们的Angular主题页面,了解练习和编程项目。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>