Angular9 路由器参考手册

下面的部分重点介绍了一些路由器的核心概念。

路由器导入

Angular 的 Router 是一个可选服务，它为指定的 URL 提供特定的组件视图。它不是 Angular 核心的一部分，因此它位于自己的包 @angular/router 中。

从任何其它的 Angular 包中导入你需要的东西。

Path："src/app/app.module.ts (import)" 。

import { RouterModule, Routes } from '@angular/router';

有关浏览器 URL 风格的更多信息，请参阅 LocationStrategy 和浏览器的网址样式。

配置

带路由的 Angular 应用中有一个 Router 服务的单例实例。当浏览器的 URL 发生变化时，该路由器会查找相应的 Route，以便根据它确定要显示的组件。

在配置之前，路由器没有任何路由。下面的例子创建了五个路由定义，通过 RouterModule.forRoot() 方法配置路由器，并把结果添加到 AppModule 的 imports 数组中。

Path："src/app/app.module.ts (excerpt)" 。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];


@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

appRoutes 路由数组描述了如何导航。把它传给模块的 imports 数组中的 RouterModule.forRoot() 方法来配置路由器。

每个 Route 都会把一个 URL path 映射到一个组件。路径中没有前导斜杠。路由器会为你解析并构建最终的 URL，这样你就可以在应用视图中导航时使用相对路径和绝对路径了。

第二个路由中的 :id 是路由参数的令牌。在像 "/hero/42" 这样的 URL 中，“42”是 id 参数的值。相应的 HeroDetailComponent 用这个值来查找并显示 id 为 42 的英雄。

第三个路由中的 data 属性是存放与该特定路由关联的任意数据的地方。每个激活的路由都可以访问 data 属性。可以用它来存储页面标题，面包屑文本和其它只读静态数据等项目。你可以尝试使用解析器守卫来检索动态数据。

第四个路由中的空路径表示该应用的默认路径 - 当 URL 中的路径为空时通常要去的地方，就像它在刚进来时一样。这个默认路由重定向到了 "/heroes" 这个 URL 的路由，因此会显示 HeroesListComponent。

如果你需要查看导航生命周期中发生了什么事件，可以把 enableTracing 选项作为路由器默认配置的一部分。这会把每个导航生命周期中发生的每个路由器事件都输出到浏览器控制台中。enableTracing 只会用于调试目的。你可以把 enableTracing: true 选项作为第二个参数传给 RouterModule.forRoot() 方法。

路由出口

RouterOutlet 是一个来自路由器库的指令，虽然它的用法像组件一样。它充当占位符，用于在模板中标记出路由器应该显示把该组件显示在那个出口的位置。

<router-outlet></router-outlet>
<!-- Routed components go here -->

对于上面的配置，当这个应用的浏览器 URL 变为 "/heroes" 时，路由器就会把这个 URL 与路由路径 "/heroes" 匹配，并把 HeroListComponent 作为兄弟元素显示在宿主组件模板中的 RouterOutlet 下方。

路由链接

要想通过某些用户操作（比如单击一下 a 标签）进行导航，请使用 RouterLink。

考虑下面的模板：

Path："src/app/app.component.html " 。

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>

a 标签上的 RouterLink 指令让路由器可以控制这些元素。导航路径是固定的，所以你可以给 routerLink 赋值一个字符串（“一次性”绑定）。

如果导航路径更加动态，你可以给它绑定到一个模板表达式，该表达式要返回一个链接参数数组。路由器会把该数组解析成一个完整的 URL。

活动路由链路

RouterLinkActive 指令会根据当前的 RouterState 切换活动 RouterLink 上所绑定的 CSS 类。

在每个 a 标签上，你会看到一个到 RouterLinkActive 指令的属性绑定，就像 routerLinkActive="..."。

等号 = 右侧的模板表达式，包含一个以空格分隔的 CSS 类字符串，当这个链接处于活动状态时，路由器就会加上这些字符串（并在非活动状态时删除）。你可以把 RouterLinkActive 指令设置成一串类的字符串，比如 [routerLinkActive]="'active fluffy'"，也可以把它绑定到一个返回这样一个字符串的组件属性上。

活动路由链接会级联到路由树的每个级别，这样父路由和子路由链接就可以同时处于活动状态。要覆盖这种行为，你可以用 { exact: true } 表达式绑定到 [routerLinkActiveOptions] 输入绑定。使用 { exact: true } 之后，给定的 RouterLink 只有在 URL 与当前 URL 完全匹配时才会激活。

路由器状态

每个成功的导航生命周期结束后，路由器都会构建一个 ActivatedRoute 对象树，它构成了路由器的当前状态。你可以从任何地方使用应用的 Router 服务和 routerState 属性来访问当前的 RouterState。

RouterState 中的每个 ActivatedRoute 都提供了向上或向下遍历路由树的方法，用于从父路由、子路由和兄弟路由中获取信息。

激活路由

路由的路径和参数可以通过注入名为 ActivatedRoute 的路由服务获得。它提供了大量有用的信息，包括：

还有两个较旧的属性，但更推荐使用它们的替代品，因为它们可能会在以后的 Angular 版本中弃用。

- `params` ：一个 `Observable`，它包含专属于该路由的必要参数和可选参数。请改用 `paramMap`。

- `queryParams`：一个包含可用于所有路由的查询参数的 `Observable`。请改用 `queryParamMap`。

路由器事件

Router 在每次导航过程中都会通过 Router.events 属性发出导航事件。这些事件的范围贯穿从导航开始和结束之间的多个时间点。导航事件的完整列表如下表所示。

当启用了 enableTracing 选项时，Angular 会把这些事件都记录到控制台。有关筛选路由器导航事件的示例，请参阅 Angular 中的 Observables 一章的路由器部分。

路由器术语

这里是一些关键的 Router 术语及其含义：