anchor.diff:      We no longer need the static `hero` property of the `AppComponent`.
       **Replace** it with this simple `selectedHero` property:
   
  -    在`AppComponent`上，我们不再需要一个固定的`hero`属性。
  +    在`AppComponent`中，我们不再需要一个固定的`hero`属性。
       那就直接把它改为`selectedHero`属性。
   
     +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero', 'app.component.ts (selectedHero)')
  
positive.code:     This UI pattern is widely known as "master-detail".
      In our case, the master is the heroes list and the detail is the selected hero.
  
      在我们的应用中，已经有了英雄列表页以及一个单独的英雄显示页。
      但列表和单独的英雄之间还没有任何关联。
      我们希望用户在列表中选中一个英雄，然后让这个被选中的英雄出现在详情视图中。
      这种UI布局模式，通常被称为“主从式”。
      在这个例子中，主视图是英雄列表，从视图则是被选中的英雄。
  
      Let’s connect the master to the detail through a `selectedHero` component property bound to a click event.
      
      我们通过组件中的一个`selectedHero`属性来连接主从视图。它被绑定到了click事件上。
  
      ### Click event
      
  
negative.code:     Remember that we are displaying `selectedHero.name` in the template.
      This name property does not exist because `selectedHero` itself is undefined.
  
      别忘了我们要在模板中显示的是`selectedHero.name`。
      显然，这个name属性是不存在的，因为`selectedHero`本身还是`undefined`呢。
  
      We'll address this problem by keeping the hero detail out of the DOM until there is a selected hero.
      
      要处理这个问题，我们可以先让英雄详情不要出现在DOM中，直到有英雄被选中。
  
      We wrap the HTML hero detail content of our template with a `<div>`.
      Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
  
      我们把模板中的“英雄详情”内容区用放在一个`<div>`中。
      然后往上添加一个`ngIf`内置指令，然后把`ngIf`的值设置为组件的`selectedHero`属性。
  
    +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
  
  