anchor.diff:  :marked
   .callout.is-critical
     header Remove <i>HeroService</i> from the <i>HeroesComponent</i> providers
  -  header 从<i>HeroesComponent</i>的`providers`中移除<i>HeroService</i>
  +  header 从<i>HeroesComponent</i>的<code>providers</code>中移除<i>HeroService</i>
     :marked
       Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array.
       We are *promoting* this service from the `HeroesComponent` to the `AppComponent`.
       We ***do not want two copies*** of this service at two different levels of our app.
       
  -    回到`HeroesComponent`，并从`providers`数组中 **移除`HeroService`** 。
  -    我们要把它从`AppComponent` *晋升* 到`HeroesComponent`中。
  -    我们不希望在应用的两个不同层次上存在它的 ***两个副本*** 。
  +    回到`HeroesComponent`，并从`providers`数组中**移除`HeroService`**。
  +    我们要把它从`HeroesComponent`*提升*到`AppComponent`中。
  +    我们可不希望在应用的两个不同层次上存在它的***两个副本***。
   :marked
     The app still runs and still displays heroes. 
     Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
     We have done no harm.
   
  -  应用仍然在运行，并且显示着英雄列表。
  +  应用仍然在运行，并显示着英雄列表。
     我们把`AppComponent`重构成了一个新的`AppComponent`和`HeroesComponent`，它们工作得很好！
  -  我们毫发无伤的完成了重构。
  +  我们毫发无损的完成了这次重构。
   :marked
     ## Add Routing
     ## 添加路由
  
positive.code:   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
  
negative.code:   the router should match it to the `'Heroes'` route and display the `HeroesComponent`.
    But where?
    
    如果我们把路径`/heroes`粘贴到浏览器的地址栏，路由器会匹配到`'Heroes'`路由，并显示`HeroesComponent`组件。
    但问题是，该把它显示在哪儿呢？
    
    We have to ***tell it where*** by adding `<router-outlet>` marker tags to the bottom of the template.
    `RouterOutlet` is one of the `ROUTER_DIRECTIVES`.
    The router displays each component immediately below the `<router-outlet>` as we navigate through the application.
    
    我们必须***告诉它位置***，所以我们把`<router-outlet>`标签添加到模板的底部。
    `RouterOutlet`是`ROUTER_DIRECTIVES`常量中的一员。
    当我们在应用中导航时，路由器就把激活的组件显示在`<router-outlet>`里面。
    
    ### Router Links
    ### 路由器链接
    We don't really expect users to paste a route URL into the address bar.
    We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
    
    我们当然不会真让用户往地址栏中粘贴路由的URL，而应该在模板中的什么地方添加一个a链接标签。点击时，就会导航到`HeroesComponent`组件。
    
    The revised template looks like this:
    
  