应用内导航：路由到视图link

In-app navigation: routing to viewslink

在单页面应用中，你可以通过显示或隐藏特定组件的显示部分来改变用户能看到的内容，而不用去服务器获取新页面。当用户执行应用任务时，他们要在你预定义的不同视图之间移动。要想在应用的单个页面中实现这种导航，你可以使用 Angular 的Router（路由器）。

In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined. To implement this kind of navigation within the single page of your app, you use the Angular Router.

为了处理从一个视图到下一个视图之间的导航，你可以使用 Angular 的路由器。路由器会把浏览器 URL 解释成改变视图的操作指南，以完成导航。

To handle the navigation from one view to the next, you use the Angular router. The router enables navigation by interpreting a browser URL as an instruction to change the view.

要探索一个具备路由器主要功能的示例应用，请参见现场演练 / 下载范例。

To explore a sample app featuring the router's primary features, see the现场演练 / 下载范例.

先决条件link

Prerequisiteslink

在创建路由之前，你应该熟悉以下内容：

Before creating a route, you should be familiar with the following:

• 组件的基础知识

  Basics of components

• 模板的基础知识

  Basics of templates

• 一个 Angular 应用，你可以使用 Angular CLI 生成一个基本的 Angular 应用。

  An Angular app—you can generate a basic Angular app using the Angular CLI.

有关这个现成应用的 Angular 简介，请参见快速上手。有关构建 Angular 应用的更深入体验，请参见英雄指南教程。两者都会指导你使用组件类和模板。

For an introduction to Angular with a ready-made app, see Getting Started. For a more in-depth experience of building an Angular app, see the Tour of Heroes tutorial. Both guide you through using component classes and templates.

生成一个支持路由的应用link

Generate an app with routing enabledlink

下面的命令会用 Angular CLI 来生成一个带有应用路由模块（AppRoutingModule）的基本 Angular 应用，它是一个 NgModule，可用来配置路由。下面的例子中应用的名字是 routing-app。

The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called AppRoutingModule, which is an NgModule where you can configure your routes. The app name in the following example is routing-app.

      
        content_copy
      
      ng new routing-app --routing
    

一旦生成新应用，CLI 就会提示你选择 CSS 或 CSS 预处理器。在这个例子中，我们接受 CSS 的默认值。

When generating a new app, the CLI prompts you to select CSS or a CSS preprocessor. For this example, accept the default of CSS.

为路由添加组件link

Adding components for routinglink

为了使用 Angular 的路由器，应用至少要有两个组件才能从一个导航到另一个。要使用 CLI 创建组件，请在命令行输入以下内容，其中 first 是组件的名称：

To use the Angular router, an app needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where first is the name of your component:

      
        content_copy
      
      ng generate component first
    

为第二个组件重复这个步骤，但给它一个不同的名字。这里的新名字是 second。

Repeat this step for a second component but give it a different name. Here, the new name is second.

      
        content_copy
      
      ng generate component second
    

CLI 会自动添加 Component 后缀，所以如果在编写 first-component，那么其组件名就是 FirstComponentComponent。

The CLI automatically appends Component, so if you were to write first-component, your component would be FirstComponentComponent.

导入这些新组件link

Importing your new componentslink

要使用这些新组件，请把它们导入到该文件顶部的 AppRoutingModule 中，具体如下：

To use your new components, import them into AppRoutingModule at the top of the file, as follows:

      
        content_copy
      
      import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
    

定义一个基本路由link

Defining a basic routelink

创建路由有三个基本的构建块。

There are three fundamental building blocks to creating a route.

把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。

Import the AppRoutingModule into AppModule and add it to the imports array.

Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 --routing 标志生成的默认 AppModule。

The Angular CLI performs this step for you. However, if you are creating an app manually or working with an existing, non-CLI app, verify that the imports and configuration are correct. The following is the default AppModule using the CLI with the --routing flag.

      
        content_copy
      
      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

1. 把 RouterModule 和 Routes 导入到你的路由模块中。

   Import RouterModule and Routes into your routing module.

   Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了 Routes 数组，并为 @NgModule() 配置了 imports 和 exports 数组。

   The Angular CLI performs this step automatically. The CLI also sets up a Routes array for your routes and configures the imports and exports arrays for @NgModule().

   import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // CLI imports router const routes: Routes = []; // sets up routes constant where you define your routes // configures NgModule imports and exports @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
   CLI app routing module

         
           content_copy
         
         import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router'; // CLI imports router
   
   const routes: Routes = []; // sets up routes constant where you define your routes
   
   // configures NgModule imports and exports
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
       

2. 在 Routes 数组中定义你的路由。

   Define your routes in your Routes array.

   这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。

   Each route in this array is a JavaScript object that contains two properties. The first property, path, defines the URL path for the route. The second property, component, defines the component Angular should use for the corresponding path.

      
        content_copy
      
      const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];
    

1. 把这些路由添加到你的应用中。

   Add your routes to your application.

   现在你已经定义了路由，可以把它们添加到应用中了。首先，添加到这两个组件的链接。把要添加路由的链接赋值给 routerLink 属性。将属性的值设置为该组件，以便在用户点击各个链接时显示这个值。接下来，修改组件模板以包含 <router-outlet> 标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。

   Now that you have defined your routes, you can add them to your application. First, add links to the two components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include <router-outlet>. This element informs Angular to update the application view with the component for the selected route.

   <h1>Angular Router App</h1> <!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in AppRoutingModule) --> <nav> <ul> <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li> <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li> </ul> </nav> <!-- The routed views render in the <router-outlet>--> <router-outlet></router-outlet>
   Template with routerLink and router-outlet

         
           content_copy
         
         <h1>Angular Router App</h1>
   <!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
   <nav>
     <ul>
       <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
       <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
     </ul>
   </nav>
   <!-- The routed views render in the <router-outlet>-->
   <router-outlet></router-outlet>
       

路由顺序link

Route orderlink

路由的顺序很重要，因为 Router 在匹配路由时使用“先到先得”策略，所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由，然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个，因为它匹配每一个 URL，只有当其它路由都没有匹配时，Router 才会选择它。

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route. The wildcard route comes last because it matches every URL and the Router selects it only if no other routes match first.

获取路由信息link

Getting route informationlink

通常，当用户导航你的应用时，你会希望把信息从一个组件传递到另一个组件。例如，考虑一个显示杂货商品购物清单的应用。列表中的每一项都有一个唯一的 id。要想编辑某个项目，用户需要单击“编辑”按钮，打开一个 EditGroceryItem 组件。你希望该组件得到该商品的 id，以便它能向用户显示正确的信息。

Often, as a user navigates your application, you want to pass information from one component to another. For example, consider an application that displays a shopping list of grocery items. Each item in the list has a unique id. To edit an item, users click an Edit button, which opens an EditGroceryItem component. You want that component to retrieve the id for the grocery item so it can display the right information to the user.

你也可以使用一个路由把这种类型的信息传给你的应用组件。要做到这一点，你可以使用 ActivatedRoute 接口。

You can use a route to pass this type of information to your application components. To do so, you use the ActivatedRoute interface.

要从路由中获取信息：

To get information from a route:

1. 把 ActivatedRoute 和 ParamMap 导入你的组件。

   Import ActivatedRoute and ParamMap to your component.

   import { Router, ActivatedRoute, ParamMap } from '@angular/router';
   In the component class (excerpt)

         
           content_copy
         
         import { Router, ActivatedRoute, ParamMap } from '@angular/router';
       

   这些 import 语句添加了组件所需的几个重要元素。要详细了解每个 API，请参阅以下 API 页面：

   These import statements add several important elements that your component needs. To learn more about each, see the following API pages:

   • Router
   • ActivatedRoute
   • ParamMap

2. 通过把 ActivatedRoute 的一个实例添加到你的应用的构造函数中来注入它：

   Inject an instance of ActivatedRoute by adding it to your application's constructor:

   constructor( private route: ActivatedRoute, ) {}
   In the component class (excerpt)

         
           content_copy
         
         constructor(
     private route: ActivatedRoute,
   ) {}
       

3. 更新 ngOnInit() 方法来访问这个 ActivatedRoute 并跟踪 id 参数：

   Update the ngOnInit() method to access the ActivatedRoute and track the id parameter:

   ngOnInit() { this.route.queryParams.subscribe(params => { this.name = params['name']; }); }
   In the component (excerpt)

         
           content_copy
         
         ngOnInit() {
     this.route.queryParams.subscribe(params => {
       this.name = params['name'];
     });
   }
       

   注意：前面的例子使用了一个变量 name，并根据 name 参数给它赋值。

   Note: The preceding example uses a variable, name, and assigns it the value based on the name parameter.

设置通配符路由link

Setting up wildcard routeslink

当用户试图导航到那些不存在的应用部件时，在正常的应用中应该能得到很好的处理。要在应用中添加此功能，需要设置通配符路由。当所请求的 URL 与任何路由器路径都不匹配时，Angular 路由器就会选择这个路由。

A well-functioning application should gracefully handle when users attempt to navigate to a part of your application that does not exist. To add this functionality to your application, you set up a wildcard route. The Angular router selects this route any time the requested URL doesn't match any router paths.

要设置通配符路由，请在 routes 定义中添加以下代码。

To set up a wildcard route, add the following code to your routes definition.

      
        content_copy
      
      { path: '**', component:  }

    

这两个星号 ** 告诉 Angular，这个 routes 定义是通配符路由。对于 component 属性，你可以使用应用中的任何组件。常见的选择包括应用专属的 PageNotFoundComponent，你可以定义它来向用户展示 404 页面，或者跳转到应用的主组件。通配符路由是最后一个路由，因为它匹配所有的 URL。有关路由顺序的更多详细信息，请参阅路由顺序。

The two asterisks, **, indicate to Angular that this routes definition is a wildcard route. For the component property, you can define any component in your application. Common choices include an application-specific PageNotFoundComponent, which you can define to display a 404 page to your users; or a redirect to your application's main component. A wildcard route is the last route because it matches any URL. For more detail on why order matters for routes, see Route order.

显示 404 页面link

Displaying a 404 pagelink

要显示 404 页面，请设置一个通配符路由，并将 component 属性设置为你要用于 404 页面的组件，如下所示：

To display a 404 page, set up a wildcard route with the component property set to the component you'd like to use for your 404 page as follows:

      
        content_copy
      
      const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];
    

path 为 ** 的最后一条路由是通配符路由。如果请求的 URL 与前面列出的路径不匹配，路由器会选择这个路由，并把该用户送到 PageNotFoundComponent。

The last route with the path of ** is a wildcard route. The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the PageNotFoundComponent.

设置重定向link

Setting up redirectslink

要设置重定向，请使用重定向源的 path、要重定向目标的 component 和一个 pathMatch 值来配置路由，以告诉路由器该如何匹配 URL。

To set up a redirect, configure a route with the path you want to redirect from, the component you want to redirect to, and a pathMatch value that tells the router how to match the URL.

      
        content_copy
      
      const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
];
    

在这个例子中，第三个路由是重定向路由，所以路由器会默认跳到 first-component 路由。注意，这个重定向路由位于通配符路由之前。这里的 path: '' 表示使用初始的相对 URL（ '' ）。

In this example, the third route is a redirect so that the router defaults to the first-component route. Notice that this redirect precedes the wildcard route. Here, path: '' means to use the initial relative URL ('').

有关 pathMatch 的详情，请参阅聚焦 pathMatch部分。

For more details on pathMatch see Spotlight on pathMatch.

嵌套路由link

Nesting routeslink

随着你的应用变得越来越复杂，你可能要创建一些根组件之外的相对路由。这些嵌套路由类型称为子路由。这意味着你要为你的应用添加第二 <router-outlet>，因为它是 AppComponent 之外的另一个 <router-outlet>。

As your application grows more complex, you may want to create routes that are relative to a component other than your root component. These types of nested routes are called child routes. This means you're adding a second <router-outlet> to your app, because it is in addition to the <router-outlet> in AppComponent.

在这个例子中，还有两个子组件，child-a 和 child-b。这里的 FirstComponent 有它自己的 <nav> 和 AppComponent 之外的第二 <router-outlet>。

In this example, there are two additional child components, child-a, and child-b. Here, FirstComponent has its own <nav> and a second <router-outlet> in addition to the one in AppComponent.

      
        content_copy
      
      <h2>First Component</h2>

<nav>
  <ul>
    <li><a routerLink="child-a">Child A</a></li>
    <li><a routerLink="child-b">Child B</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>
    

子路由和其它路由一样，同时需要 path 和 component。唯一的区别是你要把子路由放在父路由的 children 数组中。

A child route is like any other route, in that it needs both a path and a component. The one difference is that you place child routes in a children array within the parent route.

      
        content_copy
      
      const routes: Routes = [
  { path: 'first-component',
    component: FirstComponent, // this is the component with the <router-outlet> in the template
    children: [
      {
        path: 'child-a', // child route path
        component: ChildAComponent // child route component that the router renders
      },
      {
        path: 'child-b',
        component: ChildBComponent // another child route component that the router renders
      }
    ] },
    

使用相对路径link

Using relative pathslink

相对路径允许你定义相对于当前 URL 段的路径。下面的例子展示了到另一个组件 second-component 的相对路由。FirstComponent 和 SecondComponent 在树中处于同一级别，但是，指向 SecondComponent 的链接位于 FirstComponent 中，这意味着路由器必须先上升一个级别，然后进入二级目录才能找到 SecondComponent。你可以使用 ../ 符号来上升一个级别，而不用写出到 SecondComponent 的完整路径。

Relative paths allow you to define paths that are relative to the current URL segment. The following example shows a relative route to another component, second-component. FirstComponent and SecondComponent are at the same level in the tree, however, the link to SecondComponent is situated within the FirstComponent, meaning that the router has to go up a level and then into the second directory to find the SecondComponent. Rather than writing out the whole path to get to SecondComponent, you can use the ../ notation to go up a level.

      
        content_copy
      
      <h2>First Component</h2>

<nav>
  <ul>
    <li><a routerLink="../second-component">Relative Route to second component</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>
    

除了 ../，还可以使用 ./ 或者不带前导斜杠来指定当前级别。

In addition to ../, you can use ./ or no leading slash to specify the current level.

指定相对路由link

Specifying a relative routelink

要指定相对路由，请使用 NavigationExtras 中的 relativeTo 属性。在组件类中，从 @angular/router 导入 NavigationExtras。

To specify a relative route, use the NavigationExtras relativeTo property. In the component class, import NavigationExtras from the @angular/router.

然后在导航方法中使用 relativeTo 参数。在链接参数数组（它包含 items）之后添加一个对象，把该对象的 relativeTo 属性设置为当前的 ActivatedRoute，也就是 this.route。

Then use relativeTo in your navigation method. After the link parameters array, which here contains items, add an object with the relativeTo property set to the ActivatedRoute, which is this.route.

      
        content_copy
      
      goToItems() {
  this.router.navigate(['items'], { relativeTo: this.route });
}
    

goToItems() 方法会把目标 URI 解释为相对于当前路由的，并导航到 items 路由。

The goToItems() method interprets the destination URI as relative to the activated route and navigates to the items route.

访问查询参数和片段link

Accessing query parameters and fragmentslink

有时，应用中的某个特性需要访问路由的部件，比如查询参数或片段（fragment）。本教程的这个阶段使用了一个“英雄指南”中的列表视图，你可以在其中点击一个英雄来查看详情。路由器使用 id 来显示正确的英雄的详情。

Sometimes, a feature of your application requires accessing a part of a route, such as a query parameter or a fragment. The Tour of Heroes app at this stage in the tutorial uses a list view in which you can click on a hero to see details. The router uses an id to show the correct hero's details.

首先，在要导航的组件中导入以下成员。

First, import the following members in the component you want to navigate from.

      
        content_copy
      
      import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
    

接下来，注入当前路由（ActivatedRoute）服务：

Next inject the activated route service:

      
        content_copy
      
      constructor(private route: ActivatedRoute) {}
    

配置这个类，让你有一个可观察对象 heroes$、一个用来保存英雄的 id 号的 selectedId，以及 ngOnInit() 中的英雄们，添加下面的代码来获取所选英雄的 id。这个代码片段假设你有一个英雄列表、一个英雄服务、一个能获取你的英雄的函数，以及用来渲染你的列表和细节的 HTML，就像在《英雄指南》例子中一样。

Configure the class so that you have an observable, heroes$, a selectedId to hold the id number of the hero, and the heroes in the ngOnInit(), add the following code to get the id of the selected hero. This code snippet assumes that you have a heroes list, a hero service, a function to get your heroes, and the HTML to render your list and details, just as in the Tour of Heroes example.

      
        content_copy
      
      heroes$: Observable;
selectedId: number;
heroes = HEROES;

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap(params => {
      this.selectedId = Number(params.get('id'));
      return this.service.getHeroes();
    })
  );
}

    

接下来，在要导航到的组件中，导入以下成员。

Next, in the component that you want to navigate to, import the following members.

      
        content_copy
      
      import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
    

在组件类的构造函数中注入 ActivatedRoute 和 Router，这样在这个组件中就可以用它们了：

Inject ActivatedRoute and Router in the constructor of the component class so they are available to this component:

      
        content_copy
      
      item$: Observable;

  constructor(
    private route: ActivatedRoute,
    private router: Router  ) {}

  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');
    this.hero$ = this.service.getHero(id);
  }

  gotoItems(item: Item) {
    let heroId = item ? hero.id : null;
    // Pass along the item id if available
    // so that the HeroList component can select that item.
    this.router.navigate(['/heroes', { id: itemId }]);
  }

    

惰性加载link

Lazy loadinglink

你可以配置路由定义来实现惰性加载模块，这意味着 Angular 只会在需要时才加载这些模块，而不是在应用启动时就加载全部。 另外，你可以在后台预加载一些应用部件来改善用户体验。

You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the app launches. Additionally, you can preload parts of your app in the background to improve the user experience.

关于惰性加载和预加载的详情，请参见专门的指南惰性加载 NgModule。

For more information on lazy loading and preloading see the dedicated guide Lazy loading NgModules.

防止未经授权的访问link

Preventing unauthorized accesslink

使用路由守卫来防止用户未经授权就导航到应用的某些部分。Angular 中提供了以下路由守卫：

Use route guards to prevent users from navigating to parts of an app without authorization. The following route guards are available in Angular:

• CanActivate
• CanActivateChild
• CanDeactivate
• Resolve
• CanLoad

要想使用路由守卫，可以考虑使用无组件路由，因为这对于保护子路由很方便。

To use route guards, consider using component-less routes as this facilitates guarding child routes.

为你的守卫创建一项服务：

Create a service for your guard:

      
        content_copy
      
      ng generate guard your-guard
    

请在守卫类里实现你要用到的守卫。下面的例子使用 CanActivate 来保护该路由。

In your guard class, implement the guard you want to use. The following example uses CanActivate to guard the route.

      
        content_copy
      
      export class YourGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}
    

在路由模块中，在 routes 配置中使用相应的属性。这里的 canActivate 会告诉路由器它要协调到这个特定路由的导航。

In your routing module, use the appropriate property in your routes configuration. Here, canActivate tells the router to mediate navigation to this particular route.

      
        content_copy
      
      {
  path: '/your-path',
  component: YourComponent,
  canActivate: [YourGuard],
}
    

关于这个可运行示例的更多信息，请参阅路由教程中的路由守卫部分。

For more information with a working example, see the routing tutorial section on route guards.

路由器教程：英雄指南link

Router tutorial: tour of heroeslink

虽然“快速上手：英雄指南”教程介绍了 Angular 中的一般概念，而本篇 “路由器教程”详细介绍了 Angular 的路由能力。本教程将指导你在基本的路由器配置之上，创建子路由、读取路由参数、惰性加载 NgModules、路由守卫，和预加载数据，以改善用户体验。

While the Getting Started: Tour of Heroes tutorial introduces general Angular concepts, this Router Tutorial goes into greater detail regarding Angular's routing capabilities. This tutorial guides you through building upon basic router configuration to create child routes, read route parameters, lazy load NgModules, guard routes, and preload data to improve the user experience.

路由器教程概览link

Router tutorial overviewlink

本章要讲的是如何开发一个带路由的多页面应用。 接下来会重点讲解了路由的关键特性，比如：

This guide describes development of a multi-page routed sample application. Along the way, it highlights key features of the router such as:

• 把应用的各个特性组织成模块。

  Organizing the application features into modules.

• 导航到组件（Heroes 链接到“英雄列表”组件）。

  Navigating to a component (Heroes link to "Heroes List").

• 包含一个路由参数（当路由到“英雄详情”时，把该英雄的 id 传进去）。

  Including a route parameter (passing the Hero id while routing to the "Hero Detail").

• 子路由（危机中心特性有一组自己的路由）。

  Child routes (the Crisis Center has its own routes).

• CanActivate 守卫（检查路由的访问权限）。

  The CanActivate guard (checking route access).

• CanActivateChild 守卫（检查子路由的访问权限）。

  The CanActivateChild guard (checking child route access).

• CanDeactivate 守卫（询问是否丢弃未保存的更改）。

  The CanDeactivate guard (ask permission to discard unsaved changes).

• Resolve 守卫（预先获取路由数据）。

  The Resolve guard (pre-fetching route data).

• 惰性加载一个模块。

  Lazy loading an NgModule.

• CanLoad 守卫（在加载特性模块之前进行检查）。

  The CanLoad guard (check before loading feature module assets).

就像你正逐步构建应用一样，本指南设置了一系列里程碑。不过这里假设你已经熟悉了 Angular 的基本概念。有关 Angular 的一般性介绍，参见“快速上手”。有关更深入的概述，请参阅“英雄指南”教程。

This guide proceeds as a sequence of milestones as if you were building the app step-by-step, but assumes you are familiar with basic Angular concepts. For a general introduction to angular, see the Getting Started. For a more in-depth overview, see the Tour of Heroes tutorial.

有关该应用最终版本的可工作范例，请参阅现场演练 / 下载范例。

For a working example of the final version of the app, see the现场演练 / 下载范例.

范例程序实战link

The sample application in actionlink

本教程的示例应用会帮助“英雄职业管理局”找到需要英雄来解决的危机。

The sample application for this tutorial helps the Hero Employment Agency find crises for heroes to solve.

本应用具有三个主要的特性区：

The application has three main feature areas:

1. 危机中心用于维护要指派给英雄的危机列表。

   A Crisis Center for maintaining the list of crises for assignment to heroes.

2. 英雄区用于维护管理局雇佣的英雄列表。

   A Heroes area for maintaining the list of heroes employed by the agency.

3. 管理区会管理危机和英雄的列表。

   An Admin area to manage the list of crises and heroes.

点击英雄职介中心的现场演练 / 下载范例试用一下。

Try it by clicking on thislive example linklive example link / 下载范例.

该应用会渲染出一排导航按钮和和一个英雄列表视图。

The app renders with a row of navigation buttons and the Heroes view with its list of heroes.

选择其中之一，该应用就会把你带到此英雄的编辑页面。

Select one hero and the app takes you to a hero editing screen.

修改完名字，再点击“后退”按钮，应用又回到了英雄列表页，其中显示的英雄名已经变了。注意，对名字的修改会立即生效。

Alter the name. Click the "Back" button and the app returns to the heroes list which displays the changed hero name. Notice that the name change took effect immediately.

另外你也可以点击浏览器本身的后退按钮（而不是应用中的 “Back” 按钮），这也同样会回到英雄列表页。 在 Angular 应用中导航也会和标准的 Web 导航一样更新浏览器中的历史。

Had you clicked the browser's back button instead of the app's "Back" button, the app would have returned you to the heroes list as well. Angular app navigation updates the browser history as normal web navigation does.

现在，点击危机中心链接，前往危机列表页。

Now click the Crisis Center link for a list of ongoing crises.

选择其中之一，该应用就会把你带到此危机的编辑页面。 危机详情是当前页的子组件，就在列表的紧下方。

Select a crisis and the application takes you to a crisis editing screen. The Crisis Detail appears in a child component on the same page, beneath the list.

修改危机的名称。 注意，危机列表中的相应名称并没有修改。

Alter the name of a crisis. Notice that the corresponding name in the crisis list does not change.

这和英雄详情页略有不同。英雄详情会立即保存你所做的更改。 而危机详情页中，你的更改都是临时的 —— 除非按“保存”按钮保存它们，或者按“取消”按钮放弃它们。 这两个按钮都会导航回危机中心，显示危机列表。

Unlike Hero Detail, which updates as you type, Crisis Detail changes are temporary until you either save or discard them by pressing the "Save" or "Cancel" buttons. Both buttons navigate back to the Crisis Center and its list of crises.

单击浏览器后退按钮或 “Heroes” 链接，可以激活一个对话框。

Click the browser back button or the "Heroes" link to activate a dialog.

你可以回答“确定”以放弃这些更改，或者回答“取消”来继续编辑。

You can say "OK" and lose your changes or click "Cancel" and continue editing.

这种行为的幕后是路由器的 CanDeactivate 守卫。 该守卫让你有机会进行清理工作或在离开当前视图之前请求用户的许可。

Behind this behavior is the router's CanDeactivate guard. The guard gives you a chance to clean-up or ask the user's permission before navigating away from the current view.

Admin 和 Login 按钮用于演示路由器的其它能力，本章稍后的部分会讲解它们。

The Admin and Login buttons illustrate other router capabilities covered later in the guide.

里程碑 1：起步link

Milestone 1: Getting startedlink

开始本应用的一个简版，它在两个空路由之间导航。

Begin with a basic version of the app that navigates between two empty views.

用 Angular CLI 生成一个范例应用。

Generate a sample application with the Angular CLI.

      
        content_copy
      
      ng new angular-router-sample
    

定义路由link

Define Routeslink

路由器必须用“路由定义”的列表进行配置。

A router must be configured with a list of route definitions.

每个定义都被翻译成了一个Route对象。该对象有一个 path 字段，表示该路由中的 URL 路径部分，和一个 component 字段，表示与该路由相关联的组件。

Each definition translates to a Route object which has two things: a path, the URL path segment for this route; and a component, the component associated with this route.

当浏览器的 URL 变化时或在代码中告诉路由器导航到一个路径时，路由器就会翻出它用来保存这些路由定义的注册表。

The router draws upon its registry of definitions when the browser URL changes or when application code tells the router to navigate along a route path.

第一个路由执行以下操作：

The first route does the following:

• 当浏览器地址栏的 URL 变化时，如果它匹配上了路径部分 /crisis-center，路由器就会激活一个 CrisisListComponent 的实例，并显示它的视图。

  When the browser's location URL changes to match the path segment /crisis-center, then the router activates an instance of the CrisisListComponent and displays its view.

• 当应用程序请求导航到路径 /crisis-center 时，路由器激活一个 CrisisListComponent 的实例，显示它的视图，并将该路径更新到浏览器地址栏和历史。

  When the application requests navigation to the path /crisis-center, the router activates an instance of CrisisListComponent, displays its view, and updates the browser's address location and history with the URL for that path.

第一个配置定义了由两个路由构成的数组，它们用最短路径指向了 CrisisListComponent 和 HeroListComponent。

The first configuration defines an array of two routes with minimal paths leading to the CrisisListComponent and HeroListComponent.

生成 CrisisList 和 HeroList 组件，以便路由器能够渲染它们。

Generate the CrisisList and HeroList components so that the router has something to render.

      
        content_copy
      
      ng generate component crisis-list
    

      
        content_copy
      
      ng generate component hero-list
    

把每个组件的内容都替换成下列范例 HTML。

Replace the contents of each component with the sample HTML below.

      
        content_copy
      
      <h2>CRISIS CENTER</h2>
<p>Get your crisis here</p>
    

注册 Router 和 Routeslink

Register Router and Routeslink

为了使用 Router，你必须注册来自 @angular/router 包中的 RouterModule。定义一个路由数组 appRoutes，并把它传给 RouterModule.forRoot() 方法。RouterModule.forRoot() 方法会返回一个模块，其中包含配置好的 Router 服务提供者，以及路由库所需的其它提供者。一旦启动了应用，Router 就会根据当前的浏览器 URL 进行首次导航。

In order to use the Router, you must first register the RouterModule from the @angular/router package. Define an array of routes, appRoutes, and pass them to the RouterModule.forRoot() method. The RouterModule.forRoot() method returns a module that containa the configured Router service provider, plus other providers that the routing library requires. Once the application is bootstrapped, the Router performs the initial navigation based on the current browser URL.

      
        content_copy
      
      import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent }          from './app.component';
import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    

把 RouterModule.forRoot() 注册到 AppModule 的 imports 数组中，能让该 Router 服务在应用的任何地方都能使用。

Registering the RouterModule.forRoot() in the AppModule imports array makes the Router service available everywhere in the application.

添加路由出口link

Add the Router Outletlink

根组件 AppComponent 是本应用的壳。它在顶部有一个标题、一个带两个链接的导航条，在底部有一个路由器出口，路由器会在它所指定的位置上渲染各个组件。

The root AppComponent is the application shell. It has a title, a navigation bar with two links, and a router outlet where the router renders components.

路由出口扮演一个占位符的角色，表示路由组件将会渲染到哪里。

The router outlet serves as a placeholder where the routed components are rendered.

该组件所对应的模板是这样的：

The corresponding component template looks like this:

      
        content_copy
      
      <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>
    

定义通配符路由link

Define a Wildcard routelink

你以前在应用中创建过两个路由，一个是 /crisis-center，另一个是 /heroes。 所有其它 URL 都会导致路由器抛出错误，并让应用崩溃。

You've created two routes in the app so far, one to /crisis-center and the other to /heroes. Any other URL causes the router to throw an error and crash the app.

可以添加一个通配符路由来拦截所有无效的 URL，并优雅的处理它们。 通配符路由的 path 是两个星号（**），它会匹配任何 URL。 而当路由器匹配不上以前定义的那些路由时，它就会选择这个通配符路由。 通配符路由可以导航到自定义的“404 Not Found”组件，也可以重定向到一个现有路由。

Add a wildcard route to intercept invalid URLs and handle them gracefully. A wildcard route has a path consisting of two asterisks. It matches every URL. Thus, the router selects this wildcard route if it can't match a route earlier in the configuration. A wildcard route can navigate to a custom "404 Not Found" component or redirect to an existing route.

要测试本特性，请往 HeroListComponent 的模板中添加一个带 RouterLink 的按钮，并且把它的链接设置为一个不存在的路由 "/sidekicks"。

To test this feature, add a button with a RouterLink to the HeroListComponent template and set the link to a non-existant route called "/sidekicks".

      
        content_copy
      
      <h2>HEROES</h2>
<p>Get your heroes here</p>

<button routerLink="/sidekicks">Go to sidekicks</button>
    

当用户点击该按钮时，应用就会失败，因为你尚未定义过 "/sidekicks" 路由。

The application fails if the user clicks that button because you haven't defined a "/sidekicks" route yet.

不要添加 "/sidekicks" 路由，而是定义一个“通配符”路由，让它导航到 PageNotFoundComponent 组件。

Instead of adding the "/sidekicks" route, define a wildcard route and have it navigate to a PageNotFoundComponent.

      
        content_copy
      
      { path: '**', component: PageNotFoundComponent }
    

创建 PageNotFoundComponent，以便在用户访问无效网址时显示它。

Create the PageNotFoundComponent to display when users visit invalid URLs.

      
        content_copy
      
      ng generate component page-not-found
    

      
        content_copy
      
      <h2>Page not found</h2>
    

现在，当用户访问 /sidekicks 或任何无效的 URL 时，浏览器就会显示“Page not found”。 浏览器的地址栏仍指向无效的 URL。

Now when the user visits /sidekicks, or any other invalid URL, the browser displays "Page not found". The browser address bar continues to point to the invalid URL.

设置跳转link

Set up redirectslink

应用启动时，浏览器地址栏中的初始 URL 默认是这样的：

When the application launches, the initial URL in the browser bar is by default:

      
        content_copy
      
      localhost:4200
    

它不能匹配上任何硬编码进来的路由，于是就会走到通配符路由中去，并且显示 PageNotFoundComponent。

That doesn't match any of the hard-coded routes which means the router falls through to the wildcard route and displays the PageNotFoundComponent.

这个应用需要一个有效的默认路由，在这里应该用英雄列表作为默认页。当用户点击"Heroes"链接或把 localhost:4200/heroes 粘贴到地址栏时，它应该导航到列表页。

The application needs a default route to a valid page. The default page for this app is the list of heroes. The app should navigate there as if the user clicked the "Heroes" link or pasted localhost:4200/heroes into the address bar.

添加一个 redirect 路由，把最初的相对 URL（''）转换成所需的默认路径（/heroes）。

Add a redirect route that translates the initial relative URL ('') to the desired default path (/heroes).

在通配符路由上方添加一个默认路由。 在下方的代码片段中，它出现在通配符路由的紧上方，展示了这个里程碑的完整 appRoutes。

Add the default route somewhere above the wildcard route. It's just above the wildcard route in the following excerpt showing the complete appRoutes for this milestone.

      
        content_copy
      
      const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];
    

浏览器的地址栏会显示 .../heroes，好像你直接在那里导航一样。

The browser address bar shows .../heroes as if you'd navigated there directly.

重定向路由需要一个 pathMatch 属性，来告诉路由器如何用 URL 去匹配路由的路径。 在本应用中，路由器应该只有在*完整的 URL_等于 '' 时才选择 HeroListComponent 组件，因此要把 pathMatch 设置为 'full'。

A redirect route requires a pathMatch property to tell the router how to match a URL to the path of a route. In this app, the router should select the route to the HeroListComponent only when the entire URL matches '', so set the pathMatch value to 'full'.

里程碑 1 小结link

Milestone 1 wrap uplink

当用户单击某个链接时，该示例应用可以在两个视图之间切换。

Your sample app can switch between two views when the user clicks a link.

里程碑 1 涵盖了以下几点的做法：

Milestone 1 has covered how to do the following:

• 加载路由库

  Load the router library.

• 往壳组件的模板中添加一个导航条，导航条中有一些 A 标签、routerLink 指令和 routerLinkActive 指令

  Add a nav bar to the shell template with anchor tags, routerLink and routerLinkActive directives.

• 往壳组件的模板中添加一个 router-outlet 指令，视图将会被显示在那里

  Add a router-outlet to the shell template where views are displayed.

• 用 RouterModule.forRoot() 配置路由器模块

  Configure the router module with RouterModule.forRoot().

• 设置路由器，使其合成 HTML5 模式的浏览器 URL

  Set the router to compose HTML5 browser URLs.

• 使用通配符路由来处理无效路由

  Handle invalid routes with a wildcard route.

• 当应用在空路径下启动时，导航到默认路由

  Navigate to the default route when the app launches with an empty path.

这个初学者应用的结构是这样的：

The starter app's structure looks like this:

下面是本里程碑中的文件列表：

Here are the files in this milestone.

      
        content_copy
      
      <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>
    

里程碑 2：路由模块link

Milestone 2: Routing modulelink

这个里程碑会向你展示如何配置一个名叫路由模块的专用模块，它会保存你应用的路由配置。

This milestone shows you how to configure a special-purpose module called a Routing Module, which holds your app's routing configuration.

路由模块有以下几个特点：

The Routing Module has several characteristics:

• 把路由这个关注点从其它应用类关注点中分离出去。

  Separates routing concerns from other application concerns.

• 测试特性模块时，可以替换或移除路由模块。

  Provides a module to replace or remove when testing the application.

• 为路由服务提供者（如守卫和解析器等）提供一个众所周知的位置。

  Provides a well-known location for routing service providers such as guards and resolvers.

• 不要声明组件。

  Does not declare components.

把路由集成到应用中link

Integrate routing with your applink

路由应用范例中默认不包含路由。 要想在使用 Angular CLI 创建项目时支持路由，请为项目或应用的每个 NgModule 设置 --routing 选项。 当你用 CLI 命令 ng new创建新项目或用 ng generate app命令创建新应用，请指定 --routing 选项。这会告诉 CLI 包含上 @angular/router 包，并创建一个名叫 app-routing.module.ts 的文件。 然后你就可以在添加到项目或应用中的任何 NgModule 中使用路由功能了。

The sample routing application does not include routing by default. When you use the Angular CLI to create a project that does use routing, set the --routing option for the project or app, and for each NgModule. When you create or initialize a new project (using the CLI ng newcommand) or a new app (using the ng generate appcommand), specify the --routing option. This tells the CLI to include the @angular/router npm package and create a file named app-routing.module.ts. You can then use routing in any NgModule that you add to the project or app.

比如，可以用下列命令生成带路由的 NgModule。

For example, the following command generates an NgModule that can use routing.

      
        content_copy
      
      ng generate module my-module --routing
    

这将创建一个名叫 my-module-routing.module.ts 的独立文件，来保存这个 NgModule 的路由信息。 该文件包含一个空的 Routes 对象，你可以使用一些指向各个组件和 NgModule 的路由来填充该对象。

This creates a separate file named my-module-routing.module.ts to store the NgModule's routes. The file includes an empty Routes object that you can fill with routes to different components and NgModules.

将路由配置重构为路由模块link

Refactor the routing configuration into a routing modulelink

在 /app 目录下创建一个 AppRouting 模块，以包含路由配置。

Create an AppRouting module in the /app folder to contain the routing configuration.

      
        content_copy
      
      ng generate module app-routing --module app --flat
    

导入 CrisisListComponent、HeroListComponent 和 PageNotFoundCompponent 组件，就像 app.module.ts 中那样。然后把 Router 的导入语句和路由配置以及 RouterModule.forRoot() 移入这个路由模块中。

Import the CrisisListComponent, HeroListComponent, and PageNotFoundComponent symbols just like you did in the app.module.ts. Then move the Router imports and routing configuration, including RouterModule.forRoot(), into this routing module.

把 Angular 的 RouterModule 添加到该模块的 exports 数组中，以便再次导出它。 通过再次导出 RouterModule，当在 AppModule 中导入了 AppRoutingModule 之后，那些声明在 AppModule 中的组件就可以访问路由指令了，比如 RouterLink 和 RouterOutlet。

Re-export the Angular RouterModule by adding it to the module exports array. By re-exporting the RouterModule here, the components declared in AppModule have access to router directives such as RouterLink and RouterOutlet.

做完这些之后，该文件变成了这样：

After these steps, the file should look like this.

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

import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

接下来，修改 app.module.ts 文件，从 imports 数组中移除 RouterModule.forRoot。

Next, update the app.module.ts file by removing RouterModule.forRoot in the imports array.

      
        content_copy
      
      import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }     from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    

应用继续照常运行，你可以把路由模块作为将来每个模块维护路由配置的中心位置。

The application continues to work just the same, and you can use AppRoutingModule as the central place to maintain future routing configuration.

路由模块的优点link

Benfits of a routing modulelink

路由模块（通常称为 AppRoutingModule ）代替了根模板或特性模块中的路由模块。

The routing module, often called the AppRoutingModule, replaces the routing configuration in the root or feature module.

这种路由模块在你的应用不断增长，以及配置中包括了专门的守卫和解析器服务时会非常有用。

The routing module is helpful as your app grows and when the configuration includes specialized guard and resolver services.

在配置很简单时，一些开发者会跳过路由模块，并将路由配置直接混合在关联模块中（比如 AppModule ）。

Some developers skip the routing module when the configuration is minimal and merge the routing configuration directly into the companion module (for example, AppModule).

大多数应用都应该采用路由模块，以保持一致性。 它在配置复杂时，能确保代码干净。 它让测试特性模块更加容易。 它的存在让人一眼就能看出这个模块是带路由的。 开发者可以很自然的从路由模块中查找和扩展路由配置。

Most apps should implement a routing module for consistency. It keeps the code clean when configuration becomes complex. It makes testing the feature module easier. Its existence calls attention to the fact that a module is routed. It is where developers expect to find and expand routing configuration.

里程碑 3: 英雄特征区link

Milestone 3: Heroes featurelink

本里程碑涵盖了以下内容：

This milestone covers the following:

• 用模块把应用和路由组织为一些特性区。

  Organizing the app and routes into feature areas using modules.

• 命令式的从一个组件导航到另一个

  Navigating imperatively from one component to another.

• 通过路由传递必要信息和可选信息

  Passing required and optional information in route parameters.

这个示例应用在“英雄指南”教程的“服务”部分重新创建了英雄特性区，并复用了Tour of Heroes: Services example code / 下载范例中的大部分代码。

This sample app recreates the heroes feature in the "Services" section of the Tour of Heroes tutorial, and reuses much of the code from theTour of Heroes: Services example code / 下载范例.

典型的应用具有多个特性区，每个特性区都专注于特定的业务用途并拥有自己的文件夹。

A typical application has multiple feature areas, each dedicated to a particular business purpose with its own folder.

该部分将向你展示如何将应用重构为不同的特性模块、将它们导入到主模块中，并在它们之间导航。

This section shows you how refactor the app into different feature modules, import them into the main module and navigate among them.

添加英雄管理功能link

Add heroes functionalitylink

遵循下列步骤：

Follow these steps:

• 为了管理这些英雄，在 heroes 目录下创建一个带路由的 HeroesModule，并把它注册到根模块 AppModule 中。

  To manage the heroes, create a HeroesModule with routing in the heroes folder and register it with the root AppModule.

      
        content_copy
      
      ng generate module heroes/heroes --module app --flat --routing
    

• 把 app 下占位用的 hero-list 目录移到 heroes 目录中。

  Move the placeholder hero-list folder that's in the app folder into the heroes folder.

• 从教程的 "服务" 部分教程的 "服务" 部分 / 下载范例把 heroes/heroes.component.html 的内容复制到 hero-list.component.html 模板中。

  Copy the contents of the heroes/heroes.component.html from the"Services" tutorial"Services" tutorial / 下载范例into the hero-list.component.html template.

  • 给 <h2> 加文字，改成 <h2>HEROES</h2>。

    Re-label the <h2> to <h2>HEROES</h2>.

  • 删除模板底部的 <app-hero-detail> 组件。

    Delete the <app-hero-detail> component at the bottom of the template.

• 把现场演练中 heroes/heroes.component.css 文件的内容复制到 hero-list.component.css 文件中。

  Copy the contents of the heroes/heroes.component.css from the live example into the hero-list.component.css file.

• 把现场演练中 heroes/heroes.component.ts 文件的内容复制到 hero-list.component.ts 文件中。

  Copy the contents of the heroes/heroes.component.ts from the live example into the hero-list.component.ts file.

  • 把组件类名改为 HeroListComponent。

    Change the component class name to HeroListComponent.

  • 把 selector 改为 app-hero-list。

    Change the selector to app-hero-list.

• 把 hero-detail 目录中的 hero.ts、hero.service.ts 和 mock-heroes.ts 文件复制到 heroes 子目录下。

  Copy the hero-detail folder, the hero.ts, hero.service.ts, and mock-heroes.ts files into the heroes subfolder.

• 把 message.service.ts 文件复制到 src/app 目录下。

  Copy the message.service.ts into the src/app folder.

• 在 hero.service.ts 文件中修改导入 message.service 的相对路径。

  Update the relative path import to the message.service in the hero.service.ts file.

接下来，更新 HeroesModule 的元数据。

Next, update the HeroesModule metadata.

• 导入 HeroDetailComponent 和 HeroListComponent，并添加到 HeroesModule 模块的 declarations 数组中。

  Import and add the HeroDetailComponent and HeroListComponent to the declarations array in the HeroesModule.

      
        content_copy
      
      import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';

import { HeroListComponent }    from './hero-list/hero-list.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

import { HeroesRoutingModule } from './heroes-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HeroesRoutingModule
  ],
  declarations: [
    HeroListComponent,
    HeroDetailComponent
  ]
})
export class HeroesModule {}
    

英雄管理部分的文件结构如下：

The hero management file structure is as follows:

英雄特性区的路由需求link

Hero feature routing requirementslink

英雄特性区中有两个相互协作的组件：英雄列表和英雄详情。当你导航到列表视图时，它会获取英雄列表并显示出来。当你点击一个英雄时，详细视图就会显示那个特定的英雄。

The heroes feature has two interacting components, the hero list and the hero detail. When you navigate to list view, it gets a list of heroes and displays them. When you click on a hero, the detail view has to display that particular hero.

通过把所选英雄的 id 编码进路由的 URL 中，就能告诉详情视图该显示哪个英雄。

You tell the detail view which hero to display by including the selected hero's id in the route URL.

从新位置 src/app/heroes/ 目录中导入英雄相关的组件，并定义两个“英雄管理”路由。

Import the hero components from their new locations in the src/app/heroes/ folder and define the two hero routes.

现在，你有了 Heroes 模块的路由，还得在 RouterModule 中把它们注册给路由器，和 AppRoutingModule 中的做法几乎完全一样，只有一项重要的差别。

Now that you have routes for the Heroes module, register them with the Router via the RouterModule as you did in the AppRoutingModule, with an important difference.

在 AppRoutingModule 中，你使用了静态的 RouterModule.forRoot() 方法来注册路由和全应用级服务提供者。在特性模块中你要改用 forChild() 静态方法。

In the AppRoutingModule, you used the static RouterModule.forRoot() method to register the routes and application level service providers. In a feature module you use the static forChild() method.

修改后的 HeroesRoutingModule 是这样的：

The updated HeroesRoutingModule looks like this:

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

import { HeroListComponent }    from './hero-list/hero-list.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }
    

移除重复的“英雄管理”路由link

Remove duplicate hero routeslink

英雄类的路由目前定义在两个地方：HeroesRoutingModule 中（并最终给 HeroesModule）和 AppRoutingModule 中。

The hero routes are currently defined in two places: in the HeroesRoutingModule, by way of the HeroesModule, and in the AppRoutingModule.

由特性模块提供的路由会被路由器再组合上它们所导入的模块的路由。 这让你可以继续定义特性路由模块中的路由，而不用修改主路由配置。

Routes provided by feature modules are combined together into their imported module's routes by the router. This allows you to continue defining the feature module routes without modifying the main route configuration.

移除 HeroListComponent 的导入和来自 app-routing.module.ts 中的 /heroes 路由。

Remove the HeroListComponent import and the /heroes route from the app-routing.module.ts.

保留默认路由和通配符路由，因为这些路由仍然要在应用的顶层使用。

Leave the default and the wildcard routes as these are still in use at the top level of the application.

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

import { CrisisListComponent }   from './crisis-list/crisis-list.component';
// import { HeroListComponent }  from './hero-list/hero-list.component';  // <-- delete this line
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

移除英雄列表的声明link

Remove heroes declarationslink

因为 HeroesModule 现在提供了 HeroListComponent，所以把它从 AppModule 的 declarations 数组中移除。现在你已经有了一个单独的 HeroesModule，你可以用更多的组件和不同的路由来演进英雄特性区。

Because the HeroesModule now provides the HeroListComponent, remove it from the AppModule's declarations array. Now that you have a separate HeroesModule, you can evolve the hero feature with more components and different routes.

经过这些步骤，AppModule 变成了这样：

After these steps, the AppModule should look like this:

      
        content_copy
      
      import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }     from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule }     from './heroes/heroes.module';

import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HeroesModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
    

模块导入顺序link

Module import orderlink

请注意该模块的 imports 数组，AppRoutingModule 是最后一个，并且位于 HeroesModule 之后。

Notice that in the module imports array, the AppRoutingModule is last and comes after the HeroesModule.

      
        content_copy
      
      imports: [
  BrowserModule,
  FormsModule,
  HeroesModule,
  AppRoutingModule
],
    

路由配置的顺序很重要，因为路由器会接受第一个匹配上导航所要求的路径的那个路由。

The order of route configuration is important because the router accepts the first route that matches a navigation request path.

当所有路由都在同一个 AppRoutingModule 时，你要把默认路由和通配符路由放在最后（这里是在 /heroes 路由后面）， 这样路由器才有机会匹配到 /heroes 路由，否则它就会先遇到并匹配上该通配符路由，并导航到“页面未找到”路由。

When all routes were in one AppRoutingModule, you put the default and wildcard routes last, after the /heroes route, so that the router had a chance to match a URL to the /heroes route before hitting the wildcard route and navigating to "Page not found".

每个路由模块都会根据导入的顺序把自己的路由配置追加进去。 如果你先列出了 AppRoutingModule，那么通配符路由就会被注册在“英雄管理”路由之前。 通配符路由（它匹配任意URL）将会拦截住每一个到“英雄管理”路由的导航，因此事实上屏蔽了所有“英雄管理”路由。

Each routing module augments the route configuration in the order of import. If you listed AppRoutingModule first, the wildcard route would be registered before the hero routes. The wildcard route—which matches every URL—would intercept the attempt to navigate to a hero route.

路由参数link

Route Parameterslink

带参数的路由定义link

Route definition with a parameterlink

回到 HeroesRoutingModule 并再次检查这些路由定义。 HeroDetailComponent 路由的路径中带有 :id 令牌。

Return to the HeroesRoutingModule and look at the route definitions again. The route to HeroDetailComponent has an :id token in the path.

      
        content_copy
      
      { path: 'hero/:id', component: HeroDetailComponent }
    

:id 令牌会为路由参数在路径中创建一个“空位”。在这里，这种配置会让路由器把英雄的 id 插入到那个“空位”中。

The :id token creates a slot in the path for a Route Parameter. In this case, this configuration causes the router to insert the id of a hero into that slot.

如果要告诉路由器导航到详情组件，并让它显示“Magneta”，你会期望这个英雄的 id 像这样显示在浏览器的 URL 中：

If you tell the router to navigate to the detail component and display "Magneta", you expect a hero id to appear in the browser URL like this:

      
        content_copy
      
      localhost:4200/hero/15
    

如果用户把此 URL 输入到浏览器的地址栏中，路由器就会识别出这种模式，同样进入“Magneta”的详情视图。

If a user enters that URL into the browser address bar, the router should recognize the pattern and go to the same "Magneta" detail view.

在列表视图中设置路由参数link

Setting the route parameters in the list viewlink

然后导航到 HeroDetailComponent 组件。在那里，你期望看到所选英雄的详情，这需要两部分信息：导航目标和该英雄的 id。

After navigating to the HeroDetailComponent, you expect to see the details of the selected hero. You need two pieces of information: the routing path to the component and the hero's id.

因此，这个链接参数数组中有两个条目：路由的路径和一个用来指定所选英雄 id 的路由参数。

Accordingly, the link parameters array has two items: the routing path and a route parameter that specifies the id of the selected hero.

      
        content_copy
      
      <a [routerLink]="['/hero', hero.id]">
    

路由器从该数组中组合出了目标 URL： localhost:3000/hero/15。

The router composes the destination URL from the array like this: localhost:4200/hero/15.

路由器从 URL 中解析出路由参数（id:15），并通过 ActivatedRoute 服务来把它提供给 HeroDetailComponent 组件。

The router extracts the route parameter (id:15) from the URL and supplies it to the HeroDetailComponent via the ActivatedRoute service.

ActivatedRoute 实战link

Activated Route in actionlink

从路由器（router）包中导入 Router、ActivatedRoute 和 Params 类。

Import the Router, ActivatedRoute, and ParamMap tokens from the router package.

      
        content_copy
      
      import { Router, ActivatedRoute, ParamMap } from '@angular/router';
    

这里导入 switchMap 操作符是因为你稍后将会处理路由参数的可观察对象 Observable。

Import the switchMap operator because you need it later to process the Observable route parameters.

      
        content_copy
      
      import { switchMap } from 'rxjs/operators';
    

把这些服务作为私有变量添加到构造函数中，以便 Angular 注入它们（让它们对组件可见）。

Add the services as private variables to the constructor so that Angular injects them (makes them visible to the component).

      
        content_copy
      
      constructor(
  private route: ActivatedRoute,
  private router: Router,
  private service: HeroService
) {}
    

在 ngOnInit() 方法中，使用 ActivatedRoute 服务来检索路由的参数，从参数中提取出英雄的 id，并检索要显示的英雄。

In the ngOnInit() method, use the ActivatedRoute service to retrieve the parameters for the route, pull the hero id from the parameters, and retrieve the hero to display.

      
        content_copy
      
      ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.service.getHero(params.get('id')))
  );
}
    

当这个 map 发生变化时，paramMap 会从更改后的参数中获取 id 参数。

When the map changes, paramMap gets the id parameter from the changed parameters.

然后，让 HeroService 去获取具有该 id 的英雄，并返回 HeroService 请求的结果。

Then you tell the HeroService to fetch the hero with that id and return the result of the HeroService request.

switchMap 操作符做了两件事。它把 HeroService 返回的 Observable<Hero> 拍平，并取消以前的未完成请求。当 HeroService 仍在检索旧的 id 时，如果用户使用新的 id 重新导航到这个路由，switchMap 会放弃那个旧请求，并返回新 id 的英雄。

The switchMap operator does two things. It flattens the Observable<Hero> that HeroService returns and cancels previous pending requests. If the user re-navigates to this route with a new id while the HeroService is still retrieving the old id, switchMap discards that old request and returns the hero for the new id.

AsyncPipe 处理这个可观察的订阅，而且该组件的 hero 属性也会用检索到的英雄（重新）进行设置。

AsyncPipe handles the observable subscription and the component's hero property will be (re)set with the retrieved hero.

ParamMap APIlink

ParamMap API 的灵感来自于 URLSearchParams 接口。它提供了处理路由参数（ paramMap ）和查询参数（ queryParamMap ）访问的方法。

The ParamMap API is inspired by the URLSearchParams interface. It provides methods to handle parameter access for both route parameters (paramMap) and query parameters (queryParamMap).

参数的可观察对象（Observable）与组件复用link

Observable paramMap and component reuselink

在这个例子中，你接收了路由参数的 Observable 对象。 这种写法暗示着这些路由参数在该组件的生存期内可能会变化。

In this example, you retrieve the route parameter map from an Observable. That implies that the route parameter map can change during the lifetime of this component.

默认情况下，如果它没有访问过其它组件就导航到了同一个组件实例，那么路由器倾向于复用组件实例。如果复用，这些参数可以变化。

By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first. The route parameters could change each time.

假设父组件的导航栏有“前进”和“后退”按钮，用来轮流显示英雄列表中中英雄的详情。 每次点击都会强制导航到带前一个或后一个 id 的 HeroDetailComponent 组件。

Suppose a parent component navigation bar had "forward" and "back" buttons that scrolled through the list of heroes. Each click navigated imperatively to the HeroDetailComponent with the next or previous id.

你肯定不希望路由器先从 DOM 中移除当前的 HeroDetailComponent 实例，只是为了用下一个 id 重新创建它，因为它将重新渲染视图。为了更好的用户体验，路由器会复用同一个组件实例，而只是更新参数。

You wouldn't want the router to remove the current HeroDetailComponent instance from the DOM only to re-create it for the next id as this would re-render the view. For better UX, the router re-uses the same component instance and updates the parameter.

由于 ngOnInit() 在每个组件实例化时只会被调用一次，所以你可以使用 paramMap 可观察对象来检测路由参数在同一个实例中何时发生了变化。

Since ngOnInit() is only called once per component instantiation, you can detect when the route parameters change from within the same instance using the observable paramMap property.

snapshot：当不需要 Observable 时的替代品link

snapshot: the no-observable alternativelink

本应用不需要复用 HeroDetailComponent。 用户总是会先返回英雄列表，再选择另一位英雄。 所以，不存在从一个英雄详情导航到另一个而不用经过英雄列表的情况。 这意味着路由器每次都会创建一个全新的 HeroDetailComponent 实例。

This application won't re-use the HeroDetailComponent. The user always returns to the hero list to select another hero to view. There's no way to navigate from one hero detail to another hero detail without visiting the list component in between. Therefore, the router creates a new HeroDetailComponent instance every time.

假如你很确定这个 HeroDetailComponent 实例永远不会被重用，你可以使用 snapshot。

When you know for certain that a HeroDetailComponent instance will never be re-used, you can use snapshot.

route.snapshot 提供了路由参数的初始值。 你可以通过它来直接访问参数，而不用订阅或者添加 Observable 的操作符，代码如下：

route.snapshot provides the initial value of the route parameter map. You can access the parameters directly without subscribing or adding observable operators as in the following:

      
        content_copy
      
      ngOnInit() {
  let id = this.route.snapshot.paramMap.get('id');

  this.hero$ = this.service.getHero(id);
}
    

导航回列表组件link

Navigating back to the list componentlink

HeroDetailComponent 的 “Back” 按钮使用了 gotoHeroes() 方法，该方法会强制导航回 HeroListComponent。

The HeroDetailComponent "Back" button uses the gotoHeroes() method that navigates imperatively back to the HeroListComponent.

路由的 navigate() 方法同样接受一个单条目的链接参数数组，你也可以把它绑定到 [routerLink] 指令上。 它保存着到 HeroListComponent 组件的路径：

The router navigate() method takes the same one-item link parameters array that you can bind to a [routerLink] directive. It holds the path to the HeroListComponent:

      
        content_copy
      
      gotoHeroes() {
  this.router.navigate(['/heroes']);
}
    

路由参数：必须还是可选？link

Route Parameters: Required or optional?link

如果想导航到 HeroDetailComponent 以对 id 为 15 的英雄进行查看并编辑，就要在路由的 URL 中使用路由参数来指定必要参数值。

Use route parameters to specify a required parameter value within the route URL as you do when navigating to the HeroDetailComponent in order to view the hero with id 15:

      
        content_copy
      
      localhost:4200/hero/15
    

你也能在路由请求中添加可选信息。 比如，当从 hero-detail.component.ts 返回到列表时，如果能自动选中刚刚查看过的英雄就好了。

You can also add optional information to a route request. For example, when returning to the hero-detail.component.ts list from the hero detail view, it would be nice if the viewed hero were preselected in the list.

当从 HeroDetailComponent 返回时，你可以会通过把正在查看的英雄的 id 作为可选参数包含在 URL 中来实现这个特性。

You implement this feature by including the viewed hero's id in the URL as an optional parameter when returning from the HeroDetailComponent.

可选信息还可以包含其它形式，例如：

Optional information can also include other forms such as:

• 结构松散的搜索条件。比如 name='wind_'。

  Loosely structured search criteria; for example, name='wind*'.

• 多个值。比如 after='12/31/2015' & before='1/1/2017' - 没有特定的顺序 - before='1/1/2017' & after='12/31/2015' - 具有各种格式 - during='currentYear'。

  Multiple values; for example, after='12/31/2015' & before='1/1/2017'—in no particular order—before='1/1/2017' & after='12/31/2015'— in a variety of formats—during='currentYear'.

由于这些参数不适合用作 URL 路径，因此可以使用可选参数在导航过程中传递任意复杂的信息。可选参数不参与模式匹配，因此在表达上提供了巨大的灵活性。

As these kinds of parameters don't fit easily in a URL path, you can use optional parameters for conveying arbitrarily complex information during navigation. Optional parameters aren't involved in pattern matching and afford flexibility of expression.

和必要参数一样，路由器也支持通过可选参数导航。 在你定义完必要参数之后，再通过一个独立的对象来定义可选参数。

The router supports navigation with optional parameters as well as required route parameters. Define optional parameters in a separate object after you define the required route parameters.

通常，对于必传的值（比如用于区分两个路由路径的）使用必备参数；当这个值是可选的、复杂的或多值的时，使用可选参数。

In general, use a required route parameter when the value is mandatory (for example, if necessary to distinguish one route path from another); and an optional parameter when the value is optional, complex, and/or multivariate.

英雄列表：选定一个英雄（也可不选）link

Heroes list: optionally selecting a herolink

当导航到 HeroDetailComponent 时，你可以在路由参数中指定一个所要编辑的英雄 id，只要把它作为链接参数数组中的第二个条目就可以了。

When navigating to the HeroDetailComponent you specified the required id of the hero-to-edit in the route parameter and made it the second item of the link parameters array.

      
        content_copy
      
      <a [routerLink]="['/hero', hero.id]">
    

路由器在导航 URL 中内嵌了 id 的值，这是因为你把它用一个 :id 占位符当做路由参数定义在了路由的 path 中：

The router embedded the id value in the navigation URL because you had defined it as a route parameter with an :id placeholder token in the route path:

      
        content_copy
      
      { path: 'hero/:id', component: HeroDetailComponent }
    

当用户点击后退按钮时，HeroDetailComponent 构造了另一个链接参数数组，可以用它导航回 HeroListComponent。

When the user clicks the back button, the HeroDetailComponent constructs another link parameters array which it uses to navigate back to the HeroListComponent.

      
        content_copy
      
      gotoHeroes() {
  this.router.navigate(['/heroes']);
}
    

该数组缺少一个路由参数，这是因为以前你不需要往 HeroListComponent 发送信息。

This array lacks a route parameter because previously you didn't need to send information to the HeroListComponent.

现在，使用导航请求发送当前英雄的 id，以便 HeroListComponent 在其列表中突出显示该英雄。

Now, send the id of the current hero with the navigation request so that the HeroListComponent can highlight that hero in its list.

传送一个包含可选 id 参数的对象。 为了演示，这里还在对象中定义了一个没用的额外参数（foo），HeroListComponent 应该忽略它。 下面是修改过的导航语句：

Send the id with an object that contains an optional id parameter. For demonstration purposes, there's an extra junk parameter (foo) in the object that the HeroListComponent should ignore. Here's the revised navigation statement:

      
        content_copy
      
      gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}
    

该应用仍然能工作。点击“back”按钮返回英雄列表视图。

The application still works. Clicking "back" returns to the hero list view.

注意浏览器的地址栏。

Look at the browser address bar.

它应该是这样的，不过也取决于你在哪里运行它：

It should look something like this, depending on where you run it:

      
        content_copy
      
      localhost:4200/heroes;id=15;foo=foo
    

id 的值像这样出现在 URL 中（;id=15;foo=foo），但不在 URL 的路径部分。 “Heroes”路由的路径部分并没有定义 :id。

The id value appears in the URL as (;id=15;foo=foo), not in the URL path. The path for the "Heroes" route doesn't have an :id token.

可选的路由参数没有使用“？”和“&”符号分隔，因为它们将用在 URL 查询字符串中。 它们是用“;”分隔的。 这是矩阵 URL标记法。

The optional route parameters are not separated by "?" and "&" as they would be in the URL query string. They are separated by semicolons ";". This is matrix URL notation.

ActivatedRoute 服务中的路由参数link

Route parameters in the ActivatedRoute servicelink

开发到现在，英雄列表还没有变化。没有突出显示的英雄行。

In its current state of development, the list of heroes is unchanged. No hero row is highlighted.

HeroListComponent 需要添加使用这些参数的代码。

The HeroListComponent needs code that expects parameters.

以前，当从 HeroListComponent 导航到 HeroDetailComponent 时，你通过 ActivatedRoute 服务订阅了路由参数这个 Observable，并让它能用在 HeroDetailComponent 中。 你把该服务注入到了 HeroDetailComponent 的构造函数中。

Previously, when navigating from the HeroListComponent to the HeroDetailComponent, you subscribed to the route parameter map Observable and made it available to the HeroDetailComponent in the ActivatedRoute service. You injected that service in the constructor of the HeroDetailComponent.

这次，你要进行反向导航，从 HeroDetailComponent 到 HeroListComponent。

This time you'll be navigating in the opposite direction, from the HeroDetailComponent to the HeroListComponent.

首先，扩展该路由的导入语句，以包含进 ActivatedRoute 服务的类；

First, extend the router import statement to include the ActivatedRoute service symbol:

      
        content_copy
      
      import { ActivatedRoute } from '@angular/router';
    

导入 switchMap 操作符，在路由参数的 Observable 对象上执行操作。

Import the switchMap operator to perform an operation on the Observable of route parameter map.

      
        content_copy
      
      import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
    

在 HeroListComponent 构造函数中注入 ActivatedRoute。

Inject the ActivatedRoute in the HeroListComponent constructor.

      
        content_copy
      
      export class HeroListComponent implements OnInit {
  heroes$: Observable<Hero[]>;
  selectedId: number;

  constructor(
    private service: HeroService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.heroes$ = this.route.paramMap.pipe(
      switchMap(params => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes();
      })
    );
  }
}
    

ActivatedRoute.paramMap 属性是一个路由参数的 Observable。当用户导航到这个组件时，paramMap 会发射一个新值，其中包含 id。 在 ngOnInit() 中，你订阅了这些值，设置到 selectedId，并获取英雄数据。

The ActivatedRoute.paramMap property is an Observable map of route parameters. The paramMap emits a new map of values that includes id when the user navigates to the component. In ngOnInit() you subscribe to those values, set the selectedId, and get the heroes.

用 CSS 类绑定更新模板，把它绑定到 isSelected 方法上。 如果该方法返回 true，此绑定就会添加 CSS 类 selected，否则就移除它。 在 <li> 标记中找到它，就像这样：

Update the template with a class binding. The binding adds the selected CSS class when the comparison returns true and removes it when false. Look for it within the repeated <li> tag as shown here:

      
        content_copy
      
      <h2>HEROES</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes$ | async"
    [class.selected]="hero.id === selectedId">
    <a [routerLink]="['/hero', hero.id]">
      <span class="badge">{{ hero.id }}</span>{{ hero.name }}
    </a>
  </li>
</ul>

<button routerLink="/sidekicks">Go to sidekicks</button>
    

当选中列表条目时，要添加一些样式。

Add some styles to apply when the list item is selected.

      
        content_copy
      
      .heroes li.selected {
  background-color: #CFD8DC;
  color: white;
}
.heroes li.selected:hover {
  background-color: #BBD8DC;
}
    

当用户从英雄列表导航到英雄“Magneta”并返回时，“Magneta”看起来是选中的：

When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:

这个可选的 foo 路由参数人畜无害，路由器会继续忽略它。

The optional foo route parameter is harmless and the router continues to ignore it.

添加路由动画link

Adding routable animationslink

在这一节，你将为英雄详情组件添加一些动画。

This section shows you how to add some animations to the HeroDetailComponent.

首先导入 BrowserAnimationsModule，并添加到 imports 数组中：

First, import the BrowserAnimationsModule and add it to the imports array:

      
        content_copy
      
      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
  ],
})
    

接下来，为指向 HeroListComponent 和 HeroDetailComponent 的路由定义添加一个 data 对象。 转场是基于 states 的，你将使用来自路由的 animation 数据为转场提供一个有名字的动画 state。

Next, add a data object to the routes for HeroListComponent and HeroDetailComponent. Transitions are based on states and you use the animation data from the route to provide a named animation state for the transitions.

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

import { HeroListComponent }    from './hero-list/hero-list.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroListComponent, data: { animation: 'heroes' } },
  { path: 'hero/:id', component: HeroDetailComponent, data: { animation: 'hero' } }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }
    

在根目录 src/app/ 下创建一个 animations.ts。内容如下：

Create an animations.ts file in the root src/app/ folder. The contents look like this:

      
        content_copy
      
      import {
  trigger, animateChild, group,
  transition, animate, style, query
} from '@angular/animations';


// Routable animations
export const slideInAnimation =
  trigger('routeAnimation', [
    transition('heroes <=> hero', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),
      query(':enter', animateChild()),
    ])
  ]);
    

该文件做了如下工作：

This file does the following:

• 导入动画符号以构建动画触发器、控制状态并管理状态之间的过渡。

  Imports the animation symbols that build the animation triggers, control state, and manage transitions between states.

• 导出了一个名叫 slideInAnimation 的常量，并把它设置为一个名叫 routeAnimation 的动画触发器。

  Exports a constant named slideInAnimation set to an animation trigger named routeAnimation.

• 定义一个转场动画，当在 heroes 和 hero 路由之间来回切换时，如果进入（:enter）应用视图则让组件从屏幕的左侧滑入，如果离开（:leave）应用视图则让组件从右侧划出。

  Defines one transition when switching back and forth from the heroes and hero routes to ease the component in from the left of the screen as it enters the application view (:enter), the other to animate the component to the right as it leaves the application view (:leave).

回到 AppComponent，从 @angular/router 包导入 RouterOutlet，并从 './animations.ts 导入 slideInAnimation。

Back in the AppComponent, import the RouterOutlet token from the @angular/router package and the slideInAnimation from './animations.ts.

为包含 slideInAnimation 的 @Component 元数据添加一个 animations 数组。

Add an animations array to the @Component metadata that contains the slideInAnimation.

      
        content_copy
      
      import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [ slideInAnimation ]
})
    

要想使用路由动画，就要把 RouterOutlet 包装到一个元素中。再把 @routeAnimation 触发器绑定到该元素上。

In order to use the routable animations, wrap the RouterOutlet inside an element, use the @routeAnimation trigger, and bind it to the element.

为了把 @routeAnimation 转场转场到指定的状态，你需要从 ActivatedRoute 的 data 中提供它。 RouterOutlet 导出成了一个模板变量 outlet，这样你就可以绑定一个到路由出口的引用了。这个例子中使用了一个 routerOutlet 变量。

For the @routeAnimation transitions to key off states, provide it with the data from the ActivatedRoute. The RouterOutlet is exposed as an outlet template variable, so you bind a reference to the router outlet. This example uses a variable of routerOutlet.

      
        content_copy
      
      <h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</div>
    

@routeAnimation 属性使用所提供的 routerOutlet 引用来绑定到 getAnimationData()，因此下一步就要在 AppComponent 中定义那个函数。getAnimationData 函数会根据 ActivatedRoute 所提供的 data 对象返回动画的属性。animation 属性会根据你在 animations.ts 中定义 slideInAnimation() 时使用的 transition 名称进行匹配。

The @routeAnimation property is bound to the getAnimationData() with the provided routerOutlet reference, so the next step is to define that function in the AppComponent. The getAnimationData() function returns the animation property from the data provided through the ActivatedRoute. The animation property matches the transition names you used in the slideInAnimation defined in animations.ts.

      
        content_copy
      
      export class AppComponent {
  getAnimationData(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}
    

如果在两个路由之间切换，导航进来时，HeroDetailComponent 和 HeroListComponent 会从左侧滑入；导航离开时将会从右侧划出。

When switching between the two routes, the HeroDetailComponent and HeroListComponent now ease in from the left when routed to and will slide to the right when navigating away.

里程碑 3 的小结link

Milestone 3 wrap uplink

本节包括以下内容：

This section has covered the following:

• 把应用组织成特性区

  Organizing the app into feature areas.

• 命令式的从一个组件导航到另一个

  Navigating imperatively from one component to another.

• 通过路由参数传递信息，并在组件中订阅它们

  Passing information along in route parameters and subscribe to them in the component.

• 把这个特性分区模块导入根模块 AppModule

  Importing the feature area NgModule into the AppModule.

• 把动画应用到路由组件上

  Applying routable animations based on the page.

做完这些修改之后，目录结构如下：

After these changes, the folder structure is as follows:

这里是当前版本的范例程序相关文件。

Here are the relevant files for this version of the sample application.

      
        content_copy
      
      import {
  trigger, animateChild, group,
  transition, animate, style, query
} from '@angular/animations';


// Routable animations
export const slideInAnimation =
  trigger('routeAnimation', [
    transition('heroes <=> hero', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ]),
      query(':enter', [
        style({ left: '-100%'})
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%'}))
        ])
      ]),
      query(':enter', animateChild()),
    ])
  ]);
    

里程碑 4：危机中心link

Milestone 4: Crisis center featurelink

本节将向你展示如何在应用中添加子路由并使用相对路由。

This section shows you how to add child routes and use relative routing in your app.

要为应用当前的危机中心添加更多特性，请执行类似于 heroes 特性的步骤：

To add more features to the app's current crisis center, take similar steps as for the heroes feature:

• 在 src/app 目录下创建一个 crisis-center 子目录。

  Create a crisis-center subfolder in the src/app folder.

• 把 app/heroes 中的文件和目录复制到新的 crisis-center 文件夹中。

  Copy the files and folders from app/heroes into the new crisis-center folder.

• 在这些新建的文件中，把每个 "hero" 都改成 "crisis"，每个 "heroes" 都改成 "crises"。

  In the new files, change every mention of "hero" to "crisis", and "heroes" to "crises".

• 把这些 NgModule 文件改名为 crisis-center.module.ts 和 crisis-center-routing.module.ts。

  Rename the NgModule files to crisis-center.module.ts and crisis-center-routing.module.ts.

使用 mock 的 crises 来代替 mock 的 heroes：

Use mock crises instead of mock heroes:

      
        content_copy
      
      import { Crisis } from './crisis';

export const CRISES: Crisis[] = [
  { id: 1, name: 'Dragon Burning Cities' },
  { id: 2, name: 'Sky Rains Great White Sharks' },
  { id: 3, name: 'Giant Asteroid Heading For Earth' },
  { id: 4, name: 'Procrastinators Meeting Delayed Again' },
]
    

最终的危机中心可以作为引入子路由这个新概念的基础。 你可以把英雄管理保持在当前状态，以便和危机中心进行对比。

The resulting crisis center is a foundation for introducing a new concept—child routing. You can leave Heroes in its current state as a contrast with the Crisis Center.

带有子路由的危机中心link

A crisis center with child routeslink

本节会展示如何组织危机中心，来满足 Angular 应用所推荐的模式：

This section shows you how to organize the crisis center to conform to the following recommended pattern for Angular applications:

• 把每个特性放在自己的目录中。

  Each feature area resides in its own folder.

• 每个特性都有自己的 Angular 特性模块。

  Each feature has its own Angular feature module.

• 每个特性区都有自己的根组件。

  Each area has its own area root component.

• 每个特性区的根组件中都有自己的路由出口及其子路由。

  Each area root component has its own router outlet and child routes.

• 特性区的路由很少（或完全不）与其它特性区的路由交叉。

  Feature area routes rarely (if ever) cross with routes of other features.

如果你还有更多特性区，它们的组件树是这样的：

If your app had many feature areas, the app component trees might look like this:

子路由组件link

Child routing componentlink

在 crisis-center 目录下生成一个 CrisisCenter 组件：

Generate a CrisisCenter component in the crisis-center folder:

      
        content_copy
      
      ng generate component crisis-center/crisis-center
    

使用如下代码更新组件模板：

Update the component template with the following markup:

      
        content_copy
      
      <h2>CRISIS CENTER</h2>
<router-outlet></router-outlet>
    

CrisisCenterComponent 和 AppComponent 有下列共同点：

The CrisisCenterComponent has the following in common with the AppComponent:

• 它是危机中心特性区的根，正如 AppComponent 是整个应用的根。

  It is the root of the crisis center area, just as AppComponent is the root of the entire application.

• 它是危机管理特性区的壳，正如 AppComponent 是管理高层工作流的壳。

  It is a shell for the crisis management feature area, just as the AppComponent is a shell to manage the high-level workflow.

就像大多数的壳一样，CrisisCenterComponent 类是最小化的，因为它没有业务逻辑，它的模板中没有链接，只有一个标题和用于放置危机中心的子组件的 <router-outlet>。

Like most shells, the CrisisCenterComponent class is minimal because it has no business logic, and its template has no links, just a title and <router-outlet> for the crisis center child component.

子路由配置link

Child route configurationlink

在 crisis-center 目录下生成一个 CrisisCenterHome 组件，作为 "危机中心" 特性的宿主页面。

As a host page for the "Crisis Center" feature, generate a CrisisCenterHome component in the crisis-center folder.

      
        content_copy
      
      ng generate component crisis-center/crisis-center-home
    

用一条欢迎信息修改 Crisis Center 中的模板。

Update the template with a welcome message to the Crisis Center.

      
        content_copy
      
      <p>Welcome to the Crisis Center</p>
    

把 heroes-routing.module.ts 文件复制过来，改名为 crisis-center-routing.module.ts，并修改它。 这次你要把子路由定义在父路由 crisis-center 中。

Update the crisis-center-routing.module.ts you renamed after copying it from heroes-routing.module.ts file. This time, you define child routes within the parent crisis-center route.

      
        content_copy
      
      const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];
    

注意，父路由 crisis-center 有一个 children 属性，它有一个包含 CrisisListComponent 的路由。 CrisisListModule 路由还有一个带两个路由的 children 数组。

Notice that the parent crisis-center route has a children property with a single route containing the CrisisListComponent. The CrisisListComponent route also has a children array with two routes.

这两个路由分别导航到了危机中心的两个子组件：CrisisCenterHomeComponent 和 CrisisDetailComponent。

These two routes navigate to the crisis center child components, CrisisCenterHomeComponent and CrisisDetailComponent, respectively.

对这些子路由的处理中有一些重要的差异。

There are important differences in the way the router treats child routes.

路由器会把这些路由对应的组件放在 CrisisCenterComponent 的 RouterOutlet 中，而不是 AppComponent 壳组件中的。

The router displays the components of these routes in the RouterOutlet of the CrisisCenterComponent, not in the RouterOutlet of the AppComponent shell.

CrisisListComponent 包含危机列表和一个 RouterOutlet，用以显示 Crisis Center Home 和 Crisis Detail 这两个路由组件。

The CrisisListComponent contains the crisis list and a RouterOutlet to display the Crisis Center Home and Crisis Detail route components.

Crisis Detail 路由是 Crisis List 的子路由。由于路由器默认会复用组件，因此当你选择了另一个危机时，CrisisDetailComponent 会被复用。 作为对比，回头看看 Hero Detail 路由，每当你从列表中选择了不同的英雄时，都会重新创建该组件。

The Crisis Detail route is a child of the Crisis List. The router reuses components by default, so the Crisis Detail component will be re-used as you select different crises. In contrast, back in the Hero Detail route, the component was recreated each time you selected a different hero from the list of heroes.

在顶层，以 / 开头的路径指向的总是应用的根。 但这里是子路由。 它们是在父路由路径的基础上做出的扩展。 在路由树中每深入一步，你就会在该路由的路径上添加一个斜线 /（除非该路由的路径是空的）。

At the top level, paths that begin with / refer to the root of the application. But child routes extend the path of the parent route. With each step down the route tree, you add a slash followed by the route path, unless the path is empty.

如果把该逻辑应用到危机中心中的导航，那么父路径就是 /crisis-center。

Apply that logic to navigation within the crisis center for which the parent path is /crisis-center.

• 要导航到 CrisisCenterHomeComponent，完整的 URL 是 /crisis-center (/crisis-center + '' + '')。

  To navigate to the CrisisCenterHomeComponent, the full URL is /crisis-center (/crisis-center + '' + '').

• 要导航到 CrisisDetailComponent 以展示 id=2 的危机，完整的 URL 是 /crisis-center/2 (/crisis-center + '' + '/2')。

  To navigate to the CrisisDetailComponent for a crisis with id=2, the full URL is /crisis-center/2 (/crisis-center + '' + '/2').

本例子中包含站点部分的绝对 URL，就是：

The absolute URL for the latter example, including the localhost origin, is as follows:

      
        content_copy
      
      localhost:4200/crisis-center/2