anchor.diff:    That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component. 
     We'll do this in a later chapter. For now let's keep rolling.
   
  -  这里有很多种样式！我们可以像上面那样把它们内联在组件中，或者把样式移到单独的文件中 —— 这样能让编写组件变得更容易。我们会后面的章节中使用独立样式文件，现在我们先不管它。
  +  这里有很多种样式！我们可以像上面那样把它们内联在组件中，或者把样式移到单独的文件中， 这样能让编写组件变得更容易。我们会后面的章节中使用独立样式文件，现在我们先不管它。
   
     When we assign styles to a component they are scoped to that specific component.
     Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
   
     当我们为一个组件指定样式时，它们的作用域将仅限于该组件。
  -  上面的例子中，这些样式只会作用于`AppComponent`组件，而不会“泄露”到外部HTML中。
  +  上面的例子中，这些样式只会作用于`AppComponent`组件，而不会“泄露”到外部 HTML 中。
   
     Our template for displaying the heroes should now look like this:
   
  -  用于显示英雄们的这个模板看起来像这样：
  +  用于显示英雄们的模板看起来像这样：
   
   +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (styled heroes)')
   
  
positive.code: :marked
    ### Displaying heroes in a template
  
    ### 在一个模板中显示英雄
  
    Our component has `heroes`. Let’s create an unordered list in our template to display them.
    We’ll insert the following chunk of HTML below the title and above the hero details.
  
    我们的组件有了`heroes`属性，我们再到模板中创建一个无序列表来显示它们。
    我们将在标题和英雄详情之间，插入下面这段HTML代码。
  
  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
  
  
negative.code:       Learn more about [property bindings](../guide/template-syntax.html#property-binding)
        in the Template Syntax chapter.
  
        关于属性绑定的更多信息，见[模板语法](../guide/template-syntax.html#property-binding)。
  
    :marked
      The browser reloads our app.
      We select the hero Magneta and the selection is clearly identified by the background color.
  
      浏览器重新加载了我们的应用。
      我们选中英雄 Magneta，通过背景色的变化，它被清晰的标记出来。
  
    figure.image-display
      img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="英雄列表应用的输出")
  