anchor.diff:    We’ll expand our Tour of Heroes app to display a list of heroes,
     allow the user to select a hero, and display the hero’s details.
   
  -  我们需要管理多个英雄。让我们来扩展英雄指南应用，让它显示一个英雄列表，并允许用户选择一个英雄，查看该英雄的详细信息。
  +  我们需要管理多个英雄。让我们来扩展《英雄指南》应用，让它显示一个英雄列表，并允许用户选择一个英雄，查看该英雄的详细信息。
   
     Run the <live-example></live-example> for this part.
     
  
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:     Let’s fix the template to bind to the new `selectedHero` property.
      
      我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用的是以前的`hero`属性。
      我们这就修改模板，让它绑定到新的`selectedHero`属性。
  
    +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (template excerpt)')
    
    :marked
      ### Hide the empty detail with ngIf
      
      ### 使用ngIf隐藏空的详情
  
      When our app loads we see a list of heroes, but a hero is not selected.
      The `selectedHero` is `undefined`.
  