anchor.diff:      .file typings.json
   :marked
     ### Keep the app transpiling and running
  -  
  +
     ### 让应用代码保持转译和运行
  - 
  +
     Open a terminal/console window and enter the following command to
     start the TypeScript compiler, start the server, and watch for changes:
  -  
  +
     打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器：
   
   code-example(language="bash").
  
positive.code:   我们需要导入`Hero`类和`HeroService`类来引用它们的数据类型。
  
    Now implement the `DashboardComponent` class like this:
    
    我们现在就实现`DashboardComponent`类，像这样：
    
  +makeExample('toh-5/ts/app/dashboard.component.2.ts','component', 'app/dashboard.component.ts (类)')
  :marked
    We saw this kind of logic before in the `HeroesComponent`.
    
    在`HeroesComponent`之前，我们也看到过类似的逻辑：
    
    * create 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.
    
    The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
    and stub the `gotoDetail` method until we're ready to implement it.
    
    Refresh the browser and see four heroes in the new dashboard.
    
    刷新浏览器，在这个新的仪表盘中就看到了四个英雄。
  
  .l-main-section
  :marked
    ## Navigate to Hero Details
    
    ## 导航到英雄详情
  
    Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
    we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
    
    虽然我们在`HeroesComponent`组件的底部显示了所选英雄的详情，但我们还从没有*导航*到`HeroDetailComponent`组件过 —— 我们曾在需求中指定过三种：
    
    1. from the *Dashboard* to a selected hero.
    
    1. 从*仪表盘(Dashboard)*导航到一个选定的英雄。
    
    1. from the *Heroes* list to a selected hero.
    
    1. 从*英雄列表(Heroes)*导航到一个选定的英雄。
    
    1. from a "deep link" URL pasted into the browser address bar.
    
    1. 把一个指向该英雄的“深链接”URL粘贴到浏览器的地址栏。
    
    Adding a `'HeroDetail'` route seem an obvious place to start.
    
    添加`'HeroDetail'`路由，是一个显而易见的起点。
    
    ### Routing to a hero detail
    
    ### 路由到一个英雄详情
    
    We'll add a route to the `HeroDetailComponent`  in the `AppComponent` where our other routes are configured.
    
    我们将在`AppComponent`中添加一个到`HeroDetailComponent`的路由，也就是配置其它路由的地方。
    
    The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*. 
    We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
    
    新路由的不寻常之处在于，我们必须告诉`HeroDetailComponent`*该显示哪个英雄*。
    以前的`HeroesComponent`组件和`DashboardComponent`组件还从未要求我们告诉它任何东西。
    
    At the moment the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this.
    
    现在，父组件`HeroesComponent`通过数据绑定来把一个英雄对象设置为组件的`hero`属性。就像这样：
    
  code-example(format='').
    &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
  :marked
    That clearly won't work in any of our routing scenarios.
    Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
    
    显然，在我们的任何一个路由场景中它都无法工作。
    不仅如此，我们也没法把一个完整的hero对象嵌入到URL中！不过我们本来也不想这样。
    
    ### Parameterized route
    
    ### 参数化路由
    
    We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, we could expect to see an URL such as this:
    
    我们*可以*把英雄的`id`添加到URL中。当导航到一个`id`为11的英雄时，我们期望的URL是这样的：
    
  code-example(format='').
    /detail/11
  
  :marked
    The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
    We need to represent that 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
    
    ### 配置带参数的路由
    
    Here's the *route definition* we'll use.
    
    下面是我们将使用的*路由定义*。
    
  +makeExample('toh-5/ts/app/app.routes.1.ts','hero-detail-route', 'app/app.routes.ts (route to HeroDetailComponent)')(format=".")
  
  :marked
    The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
    when navigating to the `HeroDetailComponent`.
    
    路径中的冒号(:)表示`:id`是一个占位符，当导航到这个`HeroDetailComponent`组件时，它将被填入一个特定英雄的`id`。
    
  .l-sub-section
    :marked
      Of course we have to import the `HeroDetailComponent` before we create this route:
      
      当然，在创建这个路由之前，我们必须导入`HeroDetailComponent`类：
      
    +makeExample('toh-5/ts/app/app.routes.1.ts','hero-detail-import')(format=".")
    
  :marked
    We're finished with the application routes.
    
    我们已经做好了该应用的路由。
    
  
    We won'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* whether that hero is displayed on the dashboard or in the heroes list.
    
    我们没有往模板中添加一个`'英雄详情'`，这是因为用户不会直接点击导航栏中的链接去查看一个特定的英雄。
    他们只会通过在英雄列表或者仪表盘中点击来显示一个英雄。
    
    We'll get to those *hero* clicks later in the chapter.
    There's no point in working on them until the `HeroDetailComponent`
    is ready to be navigated *to*.
    
    稍后我们会响应这些*英雄*的点击事件。
    现在对它们做什么都还没有意义 —— 除非`HeroDetailComponent`已经做好了，并且能够被导航过去。
    
    That will require an `HeroDetailComponent` overhaul.
    
    那就需要对`HeroDetailComponent`做一次大修。
  
  .l-main-section
  :marked
    ## Revise the *HeroDetailComponent*
    
    ## 修改*HeroDetailComponent*
    
    Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
    
    在重写`HeroDetailComponent`之前，我们先看看它现在的样子：
    
  +makeExample('toh-4/ts/app/hero-detail.component.ts', null, 'app/hero-detail.component.ts (current)')
  
  :marked
    The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
    
    模板不用修改，我们会用原来的方式显示英雄。导致这次大修的原因是如何获得这个英雄的数据。
    
    We will no longer receive the hero in a parent component property binding.
    The new `HeroDetailComponent` should take the `id` parameter from the `params` observable
    in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
    
    我们不会再从父组件的属性绑定中取得英雄数据。
    新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
  
    We need an import statement to reference the `ActivatedRoute`.
    
    我们需要一个import语句，来引用`ActivatedRoute`。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-activated-route')(format=".")
  
  :marked
    We import the `HeroService`so we can fetch a hero.
    
    我们导入了`HeroService`，现在就能获取一个英雄了。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-hero-service')(format=".")
  
  :marked
    We import the `OnInit` and `OnDestroy` interfaces because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook
    and we'll clean up our `params` subscription in the `ngOnDestroy`.
    
    我们得导入`OnInit`和`OnDestroy`接口，因为我们需要在组件的`ngOnInit`生命周期钩子中调用`HeroService`并在`ngOnDestroy`中清理对`params`的订阅。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-oninit')(format=".")
  
  :marked
    We inject the both the `ActivatedRoute` service and the `HeroService` into the constructor as we've done before,
    making private variables for both:
    
    像以前一样，我们把`RouteParams`服务和`HeroService`服务注入到构造函数中，让它们成为私有变量。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ctor', 'app/hero-detail.component.ts (构造函数)')(format=".")
  
  :marked
    We tell the class that we want to implement the `OnInit` and `OnDestroy` interfaces.
    
    我们告诉这个类，我们要实现`OnInit`和`OnDestroy`接口。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'implement')(format=".")
  
  :marked
    Inside the `ngOnInit` lifecycle hook, we _subscribe_ to the `params` observable to
    extract the `id` parameter value from the `ActivateRoute` service
    and use the `HeroService` to fetch the hero with that `id`.
    
    在`ngOnInit`生命周期钩子中，从`RouteParams`服务中提取`id`参数，并且使用`HeroService`来获得具有这个`id`的英雄数据。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ng-oninit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
  
  :marked
    Inside the `ngOnDestroy` lifecycle hook, we _unsubscribe_ from the `params` subscription.
    
    在`ngOnDestroy`生命周期钩子中，我们_取消了_对`params`的订阅。
    
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ng-ondestroy', 'app/hero-detail.component.ts (ngOnDestroy)')(format=".")
  :marked
    Notice how we extract the `id` by calling the `subscribe` method
  
negative.code: 
  :marked
    ### Style the Navigation Links
  
    ### 美化导航链接
  
    The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
    We cooperated by surrounding those links in `<nav>` tags.
  
    设计师还给了我们一些CSS，用于让`AppComponent`中的导航链接看起来更像可被选择的按钮。
    要让它们协同工作，我们得把那些链接包含在`<nav>`标签中。
  
    Add a `app.component.css` file to the `app` folder with the following content.
  
    在`app`目录下添加一个`app.component.css`文件，内容如下：
  
  +makeExample('toh-5/ts/app/app.component.css', '', 'app/app.component.css (navigation styles)')
  
  .l-sub-section
    :marked
      **The *routerLinkActive* directive**
  
      ***routerLinkActive*指令**
  
      The Angular Router provides a `routerLinkActive` directive we can use to
      to add a class to the HTML navigation element whose route matches the active route.
      All we have to do is define the style for it. Sweet!
  
      Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的HTML导航元素自动添加一个CSS类。
      我们唯一要做的就是为它定义样式。真好！
  
  +makeExample('toh-5/ts/app/app.component.3.ts', 'router-link-active', 'app/app.component.ts (active router links)')(format=".")
  
  :marked
    Set the `AppComponent`’s `styleUrls` property to this CSS file.
  
    设置`AppComponent`的`styleUrls`属性，指向这个CSS文件。
  
  +makeExample('toh-5/ts/app/app.component.ts','style-urls', 'app/app.component.ts (styleUrls)')(format=".")
  
  :marked
    ### Global application styles
  
    ### 应用的全局样式
  
    When we add styles to a component, we're keeping everything a component needs
    &mdash; HTML, the CSS, the code &mdash; together in one convenient place.
    It's pretty easy to package it all up and re-use the component somewhere else.
  
    当我们把样式添加到组件中时，我们假定组件所需的一切 —— HTML、CSS、程序代码 —— 都在紧邻的地方。
    这样，无论是把它们打包在一起还是在别的组件中复用它都会很容易。
  
    We can also create styles at the *application level* outside of any component.
  
    我们也可以在所有组件之外创建*应用级*样式。
  
    Our designers provided some basic styles to apply to elements across the entire app.
  