` elements will help with styling later. 我们再次使用`*ngFor`来在英雄列表上迭代，并显示它们的名字。还添加了一个额外的`

`元素，来帮助稍后的美化工作。 ### Sharing the *HeroService* ### 共享 *HeroService* To populate the component's `heroes` array, you can re-use the `HeroService`. 要想管理该组件的`heroes`数组，我们可以复用`HeroService`。 Earlier, you removed the `HeroService` from the `providers` array of `HeroesComponent` and added it to the `providers` array of `AppModule`. That move created a singleton `HeroService` instance, available to all components of the app. Angular injects `HeroService` and you can use it in the `DashboardComponent`. 在前面的章节中，我们从`HeroesComponent`的`providers`数组中移除了`HeroService`服务，并把它添加到`AppModule`的`providers`数组中。这个改动创建了一个`HeroService`的单例对象，应用中的*所有*组件都可以使用它。 Angular 会把`HeroService`注入到`DashboardComponent`，我们就能在`DashboardComponent`中使用它了。 ### Get heroes ### 获取英雄数据 In dashboard.component.ts, add the following `import` statements. 打开dashboard.component.ts文件，并添加下列`import`语句。 We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before. We need the `Hero` and `HeroService` symbols in order to reference those types. 我们需要实现`OnInit`接口，因为我们将在`ngOnInit`方法中初始化英雄数组 —— 就像上次一样。我们需要导入`Hero`类和`HeroService`类来引用它们的数据类型。 Now create the `DashboardComponent` class like this: 我们现在就实现`DashboardComponent`类，像这样： This kind of logic is also used in the `HeroesComponent`: 我们在之前的`HeroesComponent`中也看到过类似的逻辑： * Define a `heroes` array property. 创建一个`heroes`数组属性。 * Inject the `HeroService` in the constructor and hold it in a private `heroService` field. 在构造函数中注入`HeroService`，并且把它保存在一个私有的`heroService`字段中。 * Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook. 在 Angular 的`ngOnInit`生命周期钩子里面调用服务来获得英雄数据。 In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice` method. 在仪表盘中我们用`Array.slice`方法提取了四个英雄（第2、3、4、5个）。 Refresh the browser to see four hero names in the new dashboard. 刷新浏览器，在这个新的仪表盘中就看到了四个英雄。 ## Navigating to hero details ## 导航到英雄详情 While the details of a selected hero displays at the bottom of the `HeroesComponent`, users should be able to navigate to the `HeroDetailComponent` in the following additional ways: 虽然我们在`HeroesComponent`组件的底部显示了所选英雄的详情，但用户还没法*导航*到`HeroDetailComponent`组件。我们可以用下列方式导航到`HeroDetailComponent`： * From the dashboard to a selected hero. 从*Dashboard（仪表盘）*导航到一个选定的英雄。 * From the heroes list to a selected hero. 从*Heroes（英雄列表）*导航到一个选定的英雄。 * From a "deep link" URL pasted into the browser address bar. 把一个指向该英雄的“深链接” URL 粘贴到浏览器的地址栏。 ### Routing to a hero detail ### 路由到一个英雄详情 You can add a route to the `HeroDetailComponent` in `app.module.ts`, where the other routes are configured. 我们将在`app.module.ts`中添加一个到`HeroDetailComponent`的路由，也就是配置其它路由的地方。 The new route is unusual in that you must tell the `HeroDetailComponent` which hero to show. You didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything. 这个新路由的不寻常之处在于，我们必须告诉`HeroDetailComponent`*该显示哪个英雄*。之前，我们不需要告诉`HeroesComponent`组件和`DashboardComponent`组件任何东西。 Currently, the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this: 现在，父组件`HeroesComponent`通过数据绑定来把一个英雄对象设置为组件的`hero`属性。就像这样： <hero-detail [hero]="selectedHero"></hero-detail> But this binding won't work in any of the routing scenarios. 显然，在我们的任何一个路由场景中它都无法工作。最后一种场景肯定不行，我们无法将一个完整的 hero 对象嵌入到 URL 中！不过我们本来也不想这样。 ### Parameterized route ### 参数化路由 You can add the hero's `id` to the URL. When routing to the hero whose `id` is 11, you could expect to see a URL such as this: 我们*可以*把英雄的`id`添加到 URL 中。当导航到一个`id`为 11 的英雄时，我们期望的 URL 是这样的： /detail/11 The `/detail/` part of the URL is constant. The trailing numeric `id` changes from hero to hero. You need to represent the variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`. URL中的`/detail/`部分是固定不变的，但结尾的数字`id`部分会随着英雄的不同而变化。我们要把路由中可变的那部分表示成一个*参数 (parameter) *或*令牌 (token) *，代表英雄的`id`。 ### Configure a route with a parameter ### 配置带参数的路由 Use the following *route definition*. 我们将使用下列*路由定义*。 The colon (:) in the path indicates that `:id` is a placeholder for a specific hero `id` when navigating to the `HeroDetailComponent`. 路径中的冒号 (:) 表示`:id`是一个占位符，当导航到这个`HeroDetailComponent`组件时，它将被填入一个特定英雄的`id`。

Be sure to import the hero detail component before creating this route. 别忘了在创建这个路由前导入英雄详情组件。

You're finished with the app routes. 我们已经完成了本应用的路由的配置。 You didn't add a `'Hero Detail'` link to the template because users don't click a navigation *link* to view a particular hero; they click a *hero name*, whether the name displays on the dashboard or in the heroes list. 我们没有往模板中添加一个`'英雄详情'`，这是因为用户不会直接点击导航栏中的链接去查看一个特定的英雄。它们只会通过在英雄列表或者仪表盘中点击来显示一个英雄。 You don't need to add the hero clicks until the `HeroDetailComponent` is revised and ready to be navigated to. 要想支持“点击英雄”，就得先对`HeroDetailComponent`进行修改，好让我们能导航到它。 ## Revise the *HeroDetailComponent* ## 修改*HeroDetailComponent* Here's what the `HeroDetailComponent` looks like now: 在重写`HeroDetailComponent`之前，我们先看看它现在的样子： The template won't change. Hero names will display the same way. The major changes are driven by how you get hero names. 模板不用修改，我们会用原来的方式显示英雄。导致这次大修的原因是如何获得这个英雄的数据。 You'll no longer receive the hero in a parent component property binding. The new `HeroDetailComponent` should take the `id` parameter from the `paramMap` Observable in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`. 我们不会再从父组件的属性绑定中接收英雄数据。新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。 Add the following imports: 先添加下列导入语句： Inject the `ActivatedRoute`, `HeroService`, and `Location` services into the constructor, saving their values in private fields: 然后注入`ActivatedRoute`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中： Tell the class to implement the `OnInit` interface. 我们告诉这个类，我们要实现`OnInit`接口。 Inside the `ngOnInit()` lifecycle hook, use the `paramMap` Observable to extract the `id` parameter value from the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`. 在`ngOnInit()`生命周期钩子中，我们从`ActivatedRoute`服务的可观察对象`params`中提取`id`参数，并且使用`HeroService`来获取具有这个`id`的英雄数据。。 The `switchMap` operator maps the `id` in the Observable route parameters to a new `Observable`, the result of the `HeroService.getHero()` method. 注意`switchMap`运算符如何将可观察的路由参数中的 `id` 映射到一个新的`Observable`，即`HeroService.getHero()`方法的结果。 If a user re-navigates to this component while a `getHero` request is still processing, `switchMap` cancels the old request and then calls `HeroService.getHero()` again. 如果用户在 `getHero` 请求执行的过程中再次导航这个组件，`switchMap` 再次调用`HeroService.getHero()`之前，会取消之前的请求。 The hero `id` is a number. Route parameters are always strings. So the route parameter value is converted to a number with the JavaScript (+) operator. 英雄的`id`是数字，而路由参数的值*总是字符串*。所以我们需要通过 JavaScript 的 (+) 操作符把路由参数的值转成数字。

### Do you need to unsubscribe? ### 我需要取消订阅吗？ As described in the [ActivatedRoute: the one-stop-shop for route information](guide/router#activated-route) section of the [Routing & Navigation](guide/router) page, the `Router` manages the observables it provides and localizes the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against memory leaks, so you don't need to unsubscribe from the route `paramMap` `Observable`. 正如以前在[路由与导航](guide/router)章的[ActivatedRoute：一站式获取路由信息](guide/router#activated-route)部分讲过的，`Router`管理它提供的[可观察对象](guide/router#activated-route)，并使订阅局部化。当组件被销毁时，会清除订阅，防止内存泄漏，所以我们不需要从路由参数`Observable`_取消订阅_。

### Add *HeroService.getHero()* ### 添加 *HeroService.getHero()* In the previous code snippet, `HeroService` doesn't have a `getHero()` method. To fix this issue, open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`. 在前面的代码片段中`HeroService`没有`getHero()`方法。要解决这个问题，请打开`HeroService`并添加一个`getHero()`方法，它会根据`id`从`getHeroes()`中过滤英雄列表。 ### Find the way back ### 回到原路 Users have several ways to navigate *to* the `HeroDetailComponent`. 用户有多种方式导航到`HeroDetailComponent`。 To navigate somewhere else, users can click one of the two links in the `AppComponent` or click the browser's back button. Now add a third option, a `goBack()` method that navigates backward one step in the browser's history stack using the `Location` service you injected previously. 要导航到别处，用户可以点击`AppComponent`中的两个链接之一，也可以点击浏览器的后退按钮。我们来添加第三个选项：一个`goBack()`方法，它使用之前注入的`Location`服务，利用浏览器的历史堆栈，导航到上一步。

Going back too far could take users out of the app. In a real app, you can prevent this issue with the CanDeactivate guard. Read more on the [CanDeactivate](api/router/CanDeactivate) page. 回退太多步会跑出我们的应用。在真实的应用中，我们需要使用CanDeactivate守卫对此进行防范。要了解更多，参见[CanDeactivate](api/router/CanDeactivate)。

You'll wire this method with an event binding to a *Back* button that you'll add to the component template. 然后，我们通过一个事件绑定把此方法绑定到模板底部的 *Back（后退）*按钮上。 Migrate the template to its own file called hero-detail.component.html: 修改模板，添加这个按钮以提醒我们还要做更多的改进，并把模板移到独立的hero-detail.component.html文件中去。 Update the component metadata with a `templateUrl` pointing to the template file that you just created. 然后修改组件元数据的`templateUrl`属性，让它指向我们刚刚创建的模板文件。 Refresh the browser and see the results. 刷新浏览器，查看结果。 ## Select a dashboard hero ## 选择一个*仪表盘*中的英雄 When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero. 当用户从仪表盘中选择了一位英雄时，本应用要导航到`HeroDetailComponent`以查看和编辑所选的英雄。 Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags. When hovering over a hero block, the target URL should display in the browser status bar and the user should be able to copy the link or open the hero detail view in a new tab. 虽然仪表盘英雄被显示为像按钮一样的方块，但是它们的行为应该像锚标签一样。当鼠标移动到一个英雄方块上时，目标 URL 应该显示在浏览器的状态条上，用户应该能拷贝链接或者在新的浏览器标签页中打开英雄详情视图。 To achieve this effect, reopen `dashboard.component.html` and replace the repeated `

` tags with `` tags. Change the opening `` tag to the following: 要达到这个效果，再次打开`dashboard.component.html`，将用来迭代的`

`替换为``，就像这样： Notice the `[routerLink]` binding. As described in the [Router links](tutorial/toh-pt5#router-links) section of this page, top-level navigation in the `AppComponent` template has router links set to fixed paths of the destination routes, "/dashboard" and "/heroes". 注意`[routerLink]`绑定。正如本章的[Router links](tutorial/toh-pt5#router-links)部分所说， [`AppComponent`模板](tutorial/toh-pt5#router-links)中的顶级导航有一些路由器链接被设置固定的路径，例如“/dashboard”和“/heroes”。 This time, you're binding to an expression containing a *link parameters array*. The array has two elements: the *path* of the destination route and a *route parameter* set to the value of the current hero's `id`. 这次，我们绑定了一个包含**链接参数数组**的表达式。该数组有两个元素，目标路由和一个用来设置当前英雄的 id 值的**路由参数**。 The two array items align with the *path* and *:id* token in the parameterized hero detail route definition that you added to `app.module.ts` earlier: 这两个数组项与之前在`app.module.ts`添加的参数化的英雄详情路由定义中的 ***path*** 和 ***:id*** 对应。 Refresh the browser and select a hero from the dashboard; the app navigates to that hero’s details. 刷新浏览器，并从仪表盘中选择一位英雄，应用就会直接导航到英雄的详情。 ## Refactor routes to a _Routing Module_ ## 重构路由为一个**路由模块** Almost 20 lines of `AppModule` are devoted to configuring four routes. Most applications have many more routes and they add guard services to protect against unwanted or unauthorized navigations. (Read more about guard services in the [Route Guards](guide/router#guards) section of the [Routing & Navigation](guide/router) page.) Routing considerations could quickly dominate this module and obscure its primary purpose, which is to establish key facts about the entire app for the Angular compiler. `AppModule`中有将近 20 行代码是用来配置四个路由的。绝大多数应用有更多路由，并且它们还有守卫服务来保护不希望或未授权的导航。（要了解守卫服务的更多知识，参见[路由与导航](guide/router)页的[路由守卫](guide/router#guards)）路由的配置可能迅速占领这个模块，并掩盖其主要目的，即为 Angular 编译器设置整个应用的关键配置。 It's a good idea to refactor the routing configuration into its own class. The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders`, a class dedicated to routing should be a *routing module*. For more information, see the [Milestone #2: The Routing Module](guide/router#routing-module) section of the [Routing & Navigation](guide/router) page. 我们应该重构路由配置到它自己的类。什么样的类呢？当前的`RouterModule.forRoot()`产生一个Angular `ModuleWithProviders`，所以这个路由类应该是一种模块类。它应该是一个[**路由模块**](guide/router#routing-module)。要想了解更多，请参阅[路由与导航](guide/router)一章的[里程碑2：路由模块](guide/router#routing-module)部分。 By convention , a routing module name contains the word "Routing" and aligns with the name of the module that declares the components navigated to. 按约定，**路由模块**的名字应该包含 “Routing”，并与导航到的组件所在的模块的名称看齐。 Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents, extracted from the `AppModule` class: 在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去： The following points are typical of routing modules: 典型**路由模块**需要注意的有： * The Routing Module pulls the routes into a variable. The variable clarifies the routing module pattern in case you export the module in the future. 将路由抽出到一个变量中。如果你将来要导出这个模块，这种 "路由模块" 的模式也会更加明确。 * The Routing Module adds `RouterModule.forRoot(routes)` to `imports`. 添加`RouterModule.forRoot(routes)`到`imports`。 * The Routing Module adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables , such as `RouterLink` and `RouterOutlet`. 把`RouterModule`添加到路由模块的`exports`中，以便关联模块（比如`AppModule`）中的组件可以访问路由模块中的声明，比如`RouterLink` 和 `RouterOutlet`。 * There are no `declarations`. Declarations are the responsibility of the companion module. 无`declarations`！声明是关联模块的任务。 * If you have guard services, the Routing Module adds module `providers`. (There are none in this example.) 如果有守卫服务，把它们添加到本模块的`providers`中（本例子中没有守卫服务）。 ### Update *AppModule* ### 修改 *AppModule* Delete the routing configuration from `AppModule` and import the `AppRoutingModule`. Use an ES2015 `import` statement *and* add it to the `NgModule.imports` list. 删除`AppModule`中的路由配置，并导入`AppRoutingModule` （使用 ES `import`语句导入，**并**将它添加到`NgModule.imports`列表）。 Here is the revised `AppModule`, compared to its pre-refactor state: 下面是修改后的`AppModule`，与重构前的对比：

The revised and simplified `AppModule` is focused on identifying the key pieces of the app. 修改并简化后的`AppModule`更专注于应用中的关键片段。 ## Select a hero in the *HeroesComponent* ## 在 *HeroesComponent* 中选择一位英雄 In the `HeroesComponent`, the current template exhibits a "master/detail" style with the list of heroes at the top and details of the selected hero below. 在`HeroesComponent`中，当前模板展示了一个主从风格的界面：上方是英雄列表，底下是所选英雄的详情。 Delete the `

` at the top. 删除顶部的`

`。 Delete the last line of the template with the `` tags. 删除模板最后带有``标签的那一行。 You'll no longer show the full `HeroDetailComponent` here. Instead, you'll display the hero detail on its own page and route to it as you did in the dashboard. 我们不在这里展示完整的`HeroDetailComponent`了。而是在独立的路由和页面中显示英雄详情，就像我们在仪表盘中所做的那样。 However, when users select a hero from the list, they won't go to the detail page. Instead, they'll see a mini detail on this page and have to click a button to navigate to the full detail page. 但是，当用户从列表中选择一个英雄时，他们不会在导航到详情页，而是在当前页显示一个Mini版详情视图，当用户点击一个按钮时，才导航到完整的详情页面。 ### Add the mini detail ### 添加 mini 版英雄详情 Add the following HTML fragment at the bottom of the template where the `` used to be: 在模板底部原来放``的地方添加下列 HTML 片段： After clicking a hero, users should see something like this below the hero list: 点击一个英雄，用户将会在英雄列表的下方看到这些：

### Format with the uppercase pipe ### 使用uppercase管道格式化 The hero's name is displayed in capital letters because of the `uppercase` pipe that's included in the interpolation binding, right after the pipe operator ( | ). 注意，英雄的名字全被显示成大写字母。那是`uppercase`管道的效果，借助它，我们能干预插值表达式绑定的过程。可以管道操作符 ( | ) 后面看到它。 Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several pipes and you can write your own. 管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。 Angular 自带了一些管道，我们也可以写自己的管道。
Read more about pipes on the [Pipes](guide/pipes) page. 关于管道的更多信息，参见[管道](guide/pipes)。
### Move content out of the component file ### 把内容移出组件文件 You still have to update the component class to support navigation to the `HeroDetailComponent` when users click the View Details button. 当用户点击查看详情按钮时，要让它能导航到`HeroDetailComponent`，我们还需要修改它。 The component file is big. It's difficult to find the component logic amidst the noise of HTML and CSS. 这个组件文件太大了。要想在 HTML 和 CSS 的噪音中看清组件的工作逻辑太难了。 Before making any more changes, migrate the template and styles to their own files. 在做更多修改之前，我们先把模板和样式移到它们自己的文件中去： First, move the template contents from `heroes.component.ts` into a new `heroes.component.html` file. Don't copy the backticks. As for `heroes.component.ts`, you'll come back to it in a minute. Next, move the styles contents into a new `heroes.component.css` file. 首先，从`heroes.component.ts`中把模板内容移到新的`heroes.component.html`文件中，但不要把反引号也拷贝过去。就像`heroes.component.ts`一样，我们很快就能做完。接着，把样式的内容移到新的`heroes.component.css`文件中。 The two new files should look like this: 这两个新文件是这样的： Now, back in the component metadata for `heroes.component.ts`, delete `template` and `styles`, replacing them with `templateUrl` and `styleUrls` respectively. Set their properties to refer to the new files. 现在，回来编辑`heroes.component.ts`中的组件元数据，删除`template` 和 `styles`属性，代之以相应的`templateUrl` 和 `styleUrls`属性。让它们指向这些新文件。
The `styleUrls` property is an array of style file names (with paths). You could list multiple style files from different locations if you needed them. `styleUrls`属性是一个由样式文件的文件名(包括路径)组成的数组。我们还可以列出来自多个不同位置的样式文件。
### Update the _HeroesComponent_ class ### 更新 _HeroesComponent_ 类 The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. The button's click event is bound to a `gotoDetail()` method that navigates _imperatively_ by telling the router where to go. 点击按钮时，`HeroesComponent`导航到`HeroDetailComponent`。该按钮的点击事件绑定到了`gotoDetail()`方法，它使用命令式的导航，告诉路由器去哪儿。 This approach requires the following changes to the component class: 该方法需要对组件类做一些修改： 1. Import the `Router` from the Angular router library. 从 Angular 路由器库导入`Router` 1. Inject the `Router` in the constructor, along with the `HeroService`. 在构造函数中注入`Router`（与`HeroService`一起） 1. Implement `gotoDetail()` by calling the router `navigate()` method. 实现`gotoDetail()`，调用路由器的`navigate()`方法 Note that you're passing a two-element link parameters array—a path and the route parameter—to the router `navigate()` method, just as you did in the `[routerLink]` binding back in the `DashboardComponent`. Here's the revised `HeroesComponent` class: 注意，我们将一个包含两个元素的链接参数数组 — 路径和路由参数 — 传递到路由的`navigate（）`，与之前在`DashboardComponent`中使用`[routerLink]`绑定一样。修改完成的`HeroesComponent`类如下所示： Refresh the browser and start clicking. Users can navigate around the app, from the dashboard to hero details and back, from heroes list to the mini detail to the hero details and back to the heroes again. 刷新浏览器，并开始点击。我们能在应用中导航：从仪表盘到英雄详情再回来，从英雄列表到 mini 版英雄详情到英雄详情，再回到英雄列表。我们可以在仪表盘和英雄列表之间跳来跳去。 You've met all of the navigational requirements that propelled this page. 我们已经满足了在本章开头设定的所有导航需求。 ## Style the app ## 美化本应用 The app is functional but it needs styling. The dashboard heroes should display in a row of rectangles. You've received around 60 lines of CSS for this purpose, including some simple media queries for responsive design. 应用在功能上已经正常了，但还需要美化。仪表盘上的英雄应该显示在一行上的几个方块中。我们拿到了大约60行CSS来完成这件事，包括一些简单的媒体查询代码以实现响应式设计。 As you now know, adding the CSS to the component `styles` metadata would obscure the component logic. Instead, edit the CSS in a separate `.css` file. 我们不能把这 60 来行 CSS 粘贴到组件元数据的`styles`中，否则它会淹没组件的工作逻辑。反之，我们应该在独立的`.css`文件中编辑这些CSS。 Add a `dashboard.component.css` file to the `app` folder and reference that file in the component metadata's `styleUrls` array property like this: 把`dashboard.component.css`文件添加到`app`目录下，并在组件元数据的`styleUrls`数组属性中引用它。就像这样： ### Add stylish hero details ### 美化英雄详情 You've also been provided with CSS styles specifically for the `HeroDetailComponent`. 我们还拿到了一些`HeroDetailComponent`特有的 CSS 风格。 Add a `hero-detail.component.css` to the `app` folder and refer to that file inside the `styleUrls` array as you did for `DashboardComponent`. Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` decorator and its import. 在`app`目录下添加hero-detail.component.css文件，并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。同时删除`hero``@Input`装饰器属性和它的导入语句。 Here's the content for the component CSS files. 上述组件的 CSS 文件内容如下： ### Style the navigation links ### 美化导航链接 The provided CSS makes the navigation links in the `AppComponent` look more like selectable buttons. You'll surround those links in `
` tags. 设计师还给了我们一些 CSS，用于让`AppComponent`中的导航链接看起来更像可被选择的按钮。要让它们协同工作，我们得把那些链接包含在`
`标签中。 Add an `app.component.css` file to the `app` folder with the following content. 在`app`目录下添加一个app.component.css文件，内容如下：
**The routerLinkActive directive routerLinkActive指令** The Angular router provides a `routerLinkActive` directive you can use to add a class to the HTML navigation element whose route matches the active route. All you have to do is define the style for it. Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的 HTML 导航元素自动添加一个 CSS 类。我们唯一要做的就是为它定义样式。真好！
Add a `styleUrls` property that refers to this CSS file as follows: 首先把`moduleId: module.id`添加到`AppComponent`组件的`@Component`元数据中以启用相对于模块的文件URL。然后添加`styleUrls`属性，使其指向这个CSS文件，代码如下： ### Global application styles ### 应用的全局样式 When you add styles to a component, you keep everything a component needs—HTML, the CSS, the code—together in one convenient place. It's easy to package it all up and re-use the component somewhere else. 当我们把样式添加到组件中时，我们假定组件所需的一切 — HTML、CSS、程序代码 — 都在紧邻的地方。这样，无论是把它们打包在一起还是在别的组件中复用它都会很容易。 You can also create styles at the application level outside of any component. 我们也可以在所有组件之外创建应用级样式。 The designers provided some basic styles to apply to elements across the entire app. These correspond to the full set of master styles that you installed earlier during [setup](guide/setup). Here's an excerpt: 我们的设计师提供了一组基础样式，这些样式应用到的元素横跨整个应用。它们与我们之前在[开发环境](guide/setup)时安装的整套样式对应。下面是摘录： Create the file `styles.css`. Ensure that the file contains the [master styles provided here](https://raw.githubusercontent.com/angular/angular/master/aio/tools/examples/shared/boilerplate/src/styles.css). Also edit `index.html` to refer to this stylesheet. 如果在根目录下没有一个名叫`styles.css`的文件，就添加它。确保它包含[这里给出的主样式](https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css)。并编辑`index.html`来引用这个样式表。 Look at the app now. The dashboard, heroes, and navigation links are styled. 看看现在的应用！我们的仪表盘、英雄列表和导航链接都漂亮多了！

## Application structure and code ## 应用结构和代码 Review the sample source code in the for this page. Verify that you have the following structure: 回顾一下本章中范例代码。验证我们是否已经得到了如下结构：

angular-tour-of-heroes

src

app

app.component.css

app.component.ts

app.module.ts

app-routing.module.ts

dashboard.component.css

dashboard.component.html

dashboard.component.ts

hero.service.ts

hero.ts

hero-detail.component.css

hero-detail.component.html

hero-detail.component.ts

heroes.component.css

heroes.component.html

heroes.component.ts

mock-heroes.ts

main.ts

index.html

styles.css

systemjs.config.js

tsconfig.json

node_modules ...

package.json

## The road you’ve travelled ## 走过的路 Here's what you achieved in this page: 本章中我们完成了这些： * You added the Angular router to navigate among different components. 添加了 Angular 路由器在各个不同组件之间导航。 * You learned how to create router links to represent navigation menu items. 学会了如何创建路由链接来表示导航栏的菜单项。 * You used router link parameters to navigate to the details of the user-selected hero. 使用路由链接参数来导航到用户所选的英雄详情。 * You shared the `HeroService` among multiple components. 在多个组件之间共享了`HeroService`服务。 * You moved HTML and CSS out of the component file and into their own files. 把 HTML 和 CSS 从组件中移出来，放到了它们自己的文件中。 * You added the `uppercase` pipe to format data. 添加了`uppercase`管道，来格式化数据。 Your app should look like this . 我们的应用现在变成了这样：。 ### The road ahead ### 前方的路 You have much of the foundation you need to build an app. You're still missing a key piece: remote data access. 我们有了很多用于构建应用的基石。但我们仍然缺少很关键的一块：远程数据存取。 In the [next tutorial page](tutorial/toh-pt6 "Http") you’ll replace the mock data with data retrieved from a server using http. 在下一章，我们将从硬编码模拟数据改为使用 http 服务从服务器获取数据。

` element, which contains a binding to `title`. `@Component`模板中的`

` at the top. 删除顶部的`