anchor.diff:  
   :marked
     # Routing Around the App
  -  
  +
     # 应用中的路由
  -  
  +
     We received new requirements for our Tour of Heroes application:
  -  
  +
     我们收到了一份《英雄指南》的新需求：
  -  
  +
     * Add a *Dashboard* view.
  -  
  +
     * 添加一个*仪表盘*视图。
  -  
  +
     * Navigate between the *Heroes* and *Dashboard* views.
  -  
  +
     * 在*英雄列表*和*仪表盘*视图之间导航。
  -  
  +
     * Clicking on a hero in either view navigates to a detail view of the selected hero.
  -  
  +
     * 无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
  -  
  +
     * Clicking a *deep link* in an email opens the detail view for a particular hero;
  -  
  +
     * 在邮件中点击一个*深链接*，会直接打开一个特定英雄的详情视图。
   
     When we’re done, users will be able to navigate the app like this:
  -  
  +
     完成时，用户就能像这样浏览一个应用：
  -  
  +
   figure.image-display
     img(src='/resources/images/devguide/toh/nav-diagram.png' alt="查看导航")
   :marked
     We'll add Angular’s *Component Router* to our app to satisfy these requirements.
  -  
  +
     我们将把Angular*组件路由器*加入应用中，以满足这些需求。(译注：硬件领域中的路由器是用来帮你找到另一台网络设备的，而这里的路由器用于帮你找到一个组件)
  -  
  +
   .l-sub-section
     :marked
       The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
       than we will in this tutorial.
  -    
  +
       [路由与导航](../guide/router.html)一章覆盖了比该教程中更详细的路由知识。
  -    
  +
   p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
   
   p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-5')]。
  
positive.code:     We specify the path _all the way back to the application root_ &mdash; `app/` in this case &mdash;
      because Angular doesn't support relative paths _by default_.
      We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
      
      我们指定的所有路径_都是相对于该应用的根目录(这里是`app/`)的_。
      因为Angular_默认_不支持使用相对于当前模块的路径。
      只要喜欢，我们也_可以_切换成[相对于组件的路径](../cookbook/component-relative-paths.html)模式。
      
  :marked
    Create that file with these contents:
    
    使用下列内容创建文件：
    
  +makeExample('toh-5/ts/app/dashboard.component.html', null, 'app/dashboard.component.html')(format=".")
  :marked
    We use `*ngFor` once again to iterate over a list of heroes and display their names.
    We added extra `<div>` elements to help with styling later in this chapter.
    
    我们又一次使用`*ngFor`来在英雄列表上迭代，并显示他们的名字。
    还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。
    
    There's a `(click)` binding to a `gotoDetail` method we haven't written yet and 
    we're displaying a list of heroes that we don't have.
    We have work to do, starting with those heroes.
    
    这里的`(click)`绑定到了`gotoDetail`方法，但我们还没实现它。而且我们也还没有要显示的英雄列表数据。
    我们有活儿干了，就从这些英雄列表开始吧。
    
    ### Share the *HeroService*
    
    ### 共享*HeroService*
    
    We'd like to re-use the `HeroService` to populate the component's `heroes` array.
    
    我们想要复用`HeroService`来存放组件的`heroes`数组。
    
    Recall earlier in the chapter that we removed the `HeroService` from the `providers` array of the `HeroesComponent`
    and added it to the `providers` array of the top level `AppComponent`.
    
    回忆一下，在前面的章节中，我们从`HeroesComponent`的`providers`数组中移除了`HeroService`服务，并把它添加到顶级组件`AppComponent`的`providers`数组中。
    
    That move created a singleton `HeroService` instance, available to *all* components of the application. 
    Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
    
    这个改动创建了一个`HeroService`的单例对象，它对应用中的*所有*组件都有效。
    在`DashboardComponent`组件中，Angular会把`HeroService`注入进来，我们就能在`DashboardComponent`中使用它了。
  
    ### Get heroes
    
    ### 获取英雄数组
    
    Open the `dashboard.component.ts` and add the requisite `import` statements.
    
    打开`dashboard.component.ts`文件，并把必备的`import`语句加进去。
    
  +makeExample('toh-5/ts/app/dashboard.component.2.ts','imports', 'app/dashboard.component.ts (导入)')(format=".")
  :marked
    We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
  
negative.code: 
  :marked
    The hero `id` is a number. Route parameters are *always strings*.
    So we convert the route parameter value to a number with the JavaScript (+) operator.
  
    英雄的`id`是数字，而路由参数的值*总是字符串*。
    所以我们需要通过JavaScript的(+)操作符把路由参数的值转成数字。
  
    ### Add *HeroService.getHero*
  
    ### 添加*HeroService.getHero*
  
    The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
    We better fix that quickly before someone notices that we broke the app.
  
    这段代码的问题在于`HeroService`并没有一个叫`getHero`的方法，我们最好在别人报告应用出问题之前赶快修复它。
  
    Open `HeroService` and add a `getHero` method that filters the heroes list from `getHeroes` by `id`:
  
    打开`HeroService`，并添加一个`getHero`方法，用来通过`id`从`getHeros`过滤英雄列表：
  
  +makeExample('toh-5/ts/app/hero.service.ts', 'get-hero', 'app/hero.service.ts (getHero)')(format=".")
  
  :marked
    Return to the `HeroDetailComponent` to clean up loose ends.
  
    回到`HeroDetailComponent`来完成收尾工作。
  
    ### Find our way back
  
    ### 回到原路
  
    We can navigate *to* the `HeroDetailComponent` in several ways.
    How do we navigate somewhere else when we're done?
  
    我们能用多种方式导航*到*`HeroDetailComponent`。
    但当我们完工时，我们该导航到那里呢？
  
    The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
    We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
  
    现在用户可以点击`AppComponent`中的两个链接，或点击浏览器的“后退”按钮。
    我们来添加第三个选项：一个`goBack`方法，来根据浏览器的历史堆栈，后退一步。
  
  +makeExample('toh-5/ts/app/hero-detail.component.ts', 'go-back', 'app/hero-detail.component.ts (goBack)')(format=".")
  
  .l-sub-section
  