anchor.diff:    - We shared the `HeroService` among multiple components
     - We moved HTML and CSS out of the component file and into their own files.
     - We added the `uppercase` pipe to format data
  +  
  +  在本章中，我们往前走了很远：
  +  - 我们添加了Angular *组件路由器* 在各个不同的组件之间导航。
  +  - 我们学会了如何创建路由链接来表示导航栏的菜单项。
  +  - 我们使用路由参数来导航到用户所选的英雄详情。
  +  - 我们在多个组件之间共享了`HeroService`服务。
  +  - 我们把HTML和CSS从组件中移出来，放到它们自己的文件中去。
  +  - 我们添加了一个`uppercase`管道，来格式化数据。
   
     ### The Road Ahead
  +  ### 前方的路
     We have much of the foundation we need to build an application.
     We're still missing a key piece: remote data access. 
     
  +  我们有了很多用于构建应用的基石。
  +  但我们仍然缺少很关键的一部分：远程数据存取。
  +  
     In a forthcoming tutorial chapter, 
     we’ll replace our mock data with data retrieved from a server using http.
  +  
  +  在即将到来的章节中，我们将从硬编码模拟数据改为使用http服务从服务器获取数据。
  
positive.code:    Going back too far could take us out of the application. 
     That's acceptable in a demo. We'd guard against it in a real application,
     perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html).
  :marked
    Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
  +makeExample('toh-5/ts/app/hero-detail.component.html', 'back-button')(format=".")
  :marked
    Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
    called `hero-detail.component.html`
  +makeExample('toh-5/ts/app/hero-detail.component.html', '', 'app/hero-detail.component.html')(format=".")
  :marked
    We update the component metadata with a `templateUrl` pointing to the template file that we just created.
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'template-url', 'app/hero-detail.component.ts (templateUrl)')(format=".")
  :marked
    Here's the (nearly) finished `HeroDetailComponent`:
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'v2', 'app/hero-detail.component.ts (latest)')(format=".")
  :marked
  
  
  .l-main-section
  :marked
    ## 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.. 
    
    In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
  +makeExample('toh-5/ts/app/dashboard.component.html','click', 'app/dashboard.component.html (click binding)')(format=".")
  :marked
    We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`. 
    Now we give it a real implementation. 
  +makeExample('toh-5/ts/app/dashboard.component.ts','goto-detail', 'app/dashboard.component.ts (gotoDetail)')(format=".")
  :marked
    The `gotoDetail` method navigates in two steps:
    1. set a route *link parameters array*
    1. pass the array to the router's navigate method.
    
    We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
    Those arrays had only one element, the name of the destination route.
    
    This array has two elements, the ***name*** of the destination route and a ***route parameter object*** 
    with an `id` field set to the value of the selected hero's `id`.
    
    The two array items align with the ***name*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `AppComponent` earlier in the chapter.
  +makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (hero detail route)')(format=".")
  :marked
    The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way: 
    `import` the `router` reference and inject it in the constructor (along with the `HeroService`):
  
  +makeExample('toh-5/ts/app/dashboard.component.ts','import-router', 'app/dashboard.component.ts (excerpts)')(format=".")
  +makeExample('toh-5/ts/app/dashboard.component.ts','ctor')(format=".")
  :marked
    Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
  
  .l-main-section
  :marked
    ## Select a Hero in the *HeroesComponent*
    We'll do something similar in the `HeroesComponent`.
    
    That component's current template exhibits a "master/detail" style with the list of heroes
    at the top and details of the selected hero below.
  +makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
  :marked
    Delete the last line of the template with the `<my-hero-detail>` tags.
    
    We'll no longer show the full `HeroDetailComponent` here. 
    We're going to display the hero detail on its own page and route to it as we did in the dashboard.
    
    But we'll throw in a small twist for variety. 
    When the user selects a hero from the list, we *won't* go to the detail page.
    We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
    
    ### Add the *mini-detail*
    Add the following HTML fragment at the bottom of the template where the `<my-hero-detail>` used to be:
  +makeExample('toh-5/ts/app/heroes.component.html','mini-detail')(format=".")
  :marked
    After clicking a hero, the user should see something like this below the hero list:
    
  figure.image-display
    img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")
  :marked
    ### Format with the *UpperCasePipe*
    
    Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
    that we slipped into the interpolation binding. Look for it right after the pipe operator, ( | ).
  +makeExample('toh-5/ts/app/heroes.component.html','pipe')(format=".")
  :marked
    Pipes are a good way to format strings, currency amounts, dates and other display data.
    Angular ships with several pipes and we can write our own.
  .l-sub-section
    :marked
      Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
  :marked
    ### Move content out of the component file
    We are not done. We still have to update the component class to support navigation to the
    `HeroDetailComponent` when the user clicks the *View Details* button.
    
    This component file is really big. Most of it is either template or CSS styles. 
    It's difficult to find the component logic amidst the noise of HTML and CSS.
    
    Let's migrate the template and the styles to their own files before we make any more changes:
    1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
    1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
    1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
    
    The revised component data looks like this:
  +makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
  :marked
    Now we can see what's going on as we update the component class along the same lines as the dashboard:
    1. Import the `router`
  
negative.code:     The `styleUrls` property is an array of style file names (with paths).
      We could list multiple style files from different locations if we needed them.
      As with `templateUrl`, we must specify the path _all the way back to the application root_.
      
      `styleUrls`属性是一个由样式文件的文件名（包括路径）组成的数组。
      如果需要，我们还可以列出来自多个不同位置的样式文件。
      和`templateUrl`一样，我们必须指定 _相对于此应用根目录_ 的路径。
  :marked
    ### Stylish Hero Details
    ### 美化英雄详情
    The designers also gave us 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 we did for `DashboardComponent`.
    
    在`app`目录下添加`hero-detail.component.css`文件，并且在`styleUrls`数组中引用它 —— 就像当初在`DashboardComponent`中做过的那样。
    
    Here's the content for the aforementioned component CSS files.  
    
    上述组件的CSS文件内容如下：
  +makeTabs(
    `toh-5/ts/app/hero-detail.component.css,
    toh-5/ts/app/dashboard.component.css`,
  