anchor.diff:    We need an import statement to reference the `RouteParams`.
     
     我们需要一个import语句，来引用`RouteParams`。
  +  
   +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-route-params')(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` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
     
     我们要导入`OnInit`接口，是因为我们需要在组件的`ngOnInit`生命周期钩子中调用`HeroService`。
  +  
   +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-oninit')(format=".")
  +
   :marked
     We inject the both the `RouteParams` 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` interface.
     
     我们告诉这个类，我们要实现`OnInit`接口。
  +  
   +makeExample('toh-5/ts/app/hero-detail.component.ts', 'implement')(format=".")
  +
   :marked
     Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` 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
     Notice how we extract the `id` by calling the `RouteParams.get` method.
     
     注意我们是如何通过调用`RouteParams.get`方法来获取`id`的。
  +  
   +makeExample('toh-5/ts/app/hero-detail.component.ts', 'get-id')(format=".")
  +
   :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. 
  
positive.code:   img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini版英雄详情" height="70")
  :marked
    ### Format with the *UpperCasePipe*
    ### 使用*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 ( | ).
    
    注意，英雄的名字全被显示成大写字母。那是 `UpperCasePipe`的效果，借助它，我们能插手“插值表达式绑定”的过程。去管道操作符 ( | ) 后面找它。
  +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.
    
    管道擅长做下列工作：格式化字符串、金额、日期和其它显示数据。
    Angular自带了好几个管道，而且我们还可以写自己的管道。
  .l-sub-section
    :marked
      Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
      
      要学习关于管道的更多知识，参见[管道](../guide/pipes.html)一章。
  :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.
    
  
negative.code:   我们有活儿干了，就从这些英雄列表开始吧。
    
    ### Share the *HeroService*
    
    ### 共享*HeroService*
    
    We'd like to re-use the `HeroService` to populate the component's `heroes` array.
  