anchor.diff:  .l-main-section
   :marked
     ## Recap
  +  ## 总结
   
     ### The Road Behind
  +  ### 走过的路
     We travelled a great distance in this chapter.
     - We added the Angular *Component Router* to navigate among different components.
     - We learned how to create router links to represent navigation menu items
  
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:   1. Implement the `gotoDetail` method by calling the `router.navigate` method 
    with a two-part 'HeroDetail' *link parameters array*.
    
    现在，我们一下就明白该怎么像仪表盘中那样更新组件类了：
    1. 导入`router`
    1. 把`router`注入到构造函数中（就像`HeroService`那样）
    1. 实现`gotoDetail`方法：以`HeroDetail`和 *链接参数数组* 为参数调用`router.navigate`方法。
    
    Here's the revised component class:
    
    下面是修改过的组件类：
  +makeExample('toh-5/ts/app/heroes.component.ts', 'class', 'app/heroes.component.ts (类)')
  :marked
    Refresh the browser and start clicking. 
    We can navigate around the app, from the dashboard to hero details and back,
    for heroes list to the mini-detail to the hero details and back to the heroes again. 
    We can jump back and forth between the dashboard and the heroes.
    
    刷新浏览器，并且开始点击。
    我们能在应用中导航：从仪表盘到英雄详情再回来，从英雄列表到Mini版英雄详情到英雄详情，然后再回到英雄列表。
    我们可以在仪表盘和英雄列表之间跳来跳去。
    
    We've met all of the navigational requirements that propelled this chapter.
    
    我们已经达成了本章最初设定的所有导航需求。
  
  .l-main-section
  :marked
    ## Styling the App
    ## 美化本应用
    The app is functional but pretty ugly.
    Our creative designer team provided some CSS files to make it look better.
    
    应用的功能已经正常了，但还太丑。
    我们富有创意的设计师团队提供了一些CSS文件，能让它更好看一些。
  
    ### A Dashboard with Style
    ### 具有样式的仪表盘
    The designers think we should display the dashboard heroes in a row of rectangles. 
    They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
  
    设计师认为我们应该把仪表盘的英雄们显示在一排方块中。
    他们给了我们大约60行CSS来实现它，包括一些简单的媒体查询语句以实现响应式设计。
  
    If we paste these ~60 lines into the component `styles` metadata,
    they'll completely obscure the component logic. 
    Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway. 
    
    如果我们把这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`数组属性中引用它。就像这样：
  +makeExample('toh-5/ts/app/dashboard.component.ts', 'css', 'app/dashboard.component.ts (styleUrls)')(format=".")
  :marked
  .l-sub-section
  