anchor.diff:  
     To update the `firstName` property, we must get the changed text by following
     the path `$event.target.value`.
  -
  +  
     要更改`firstName`属性，我们必须通过路径`$event.target.value`来获取更改后的值。
   
     If the event belongs to a directive (remember: components are directives), `$event` has whatever shape the directive chose to produce.
  -
  +  
     如果这个事件属于指令（记住：组件是指令的一种），那么`$event`可以具有指令想生成的任何形态。
   
     <a id="eventemitter"></a>
  
positive.code:   :marked
      Alternatively, we can identify members in the `inputs` and `outputs` #{_array}s
      of the directive metadata, as in this example:
  
      另外，我们还可以在指令元数据的`inputs`或`outputs`数组中标记出这些成员。比如这个例子：
    +makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-2')(format=".")
    <br>
    :marked
      We can specify an input/output property either with a decorator or in a metadata #{_array}.
      Don't do both!
  
      我们既可以通过装饰器，又可以通过元数据数组来指定输入/输出属性。但别同时用！
  
  :marked
    ### Input or output?
    ### 输入或输出？
  
    *Input* properties usually receive data values.
    *Output* properties expose event producers, such as `EventEmitter` objects.
  
    *输入*属性通常接收数据值。
    *输出*属性暴露事件生产者，比如`EventEmitter`对象。
  
    The terms _input_ and _output_ reflect the perspective of the target directive.
  
    _输入_和_输出_这两个词是从目标指令的视角来说的。
  figure.image-display
      img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出")
  :marked
    `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
    because data flows *into* that property from a template binding expression.
  
    `HeroDetailComponent.hero`是一个相对于`HeroDetailComponent`视角的**输入**属性，因为数据流从模板绑定表达式流向那个属性。
  
    `HeroDetailComponent.deleteRequest` is an **output** property from the perspective of `HeroDetailComponent`
    because events stream *out* of that property and toward the handler in a template binding statement.
  
    `HeroDetailComponent.deleteRequest`是一个相对于`HeroDetailComponent`视角的**输出**属性，因为事件流来自这个属性，并且被模板绑定语句所处理。
  
  h3#aliasing-io Aliasing input/output properties
  
negative.code:     如果我们通过`input.getAttribute('value') // returns "Bob"`语句获取这个input元素的Attribute，就会明白这一点。
  
      The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value.
      
      HTML Attribute `value`指定了*初始*值；DOM的`value`Property 是*当前*值。
  
      The `disabled` attribute is another peculiar example. A button's `disabled` *property* is
      `false` by default so the button is enabled.
      When we add the `disabled` *attribute*, its presence alone initializes the  button's `disabled` *property* to `true`
      so the button is disabled.
      
      `disabled` Attribute是另一个古怪的例子。按钮的`disabled` *Property* 是`false`，因为默认情况下按钮是可用的。
      当我们添加`disabled` *Attribute*时，它只要出现就表示按钮的`disabled` *Property*是`true`，于是按钮就被禁用了。
  
      Adding and removing the `disabled` *attribute* disables and enables the button. The value of the *attribute* is irrelevant,
      which is why we cannot enable a button by writing `<button disabled="false">Still Disabled</button>`.
      
      添加或删除`disabled`时，*Attribute*会禁用或启用这个按钮。但 *Attribute*的值无关紧要，这就是我们为什么没法通过
      `<button disabled="false">仍被禁用</button>`这种写法来启用一个按钮的原因。
  
      Setting the button's `disabled` *property*  (say, with an Angular binding) disables or enables the button.
      The value of the *property* matters.
      
      设置按钮的`disabled` *Property*（比如，通过Angular绑定）可以禁用或启用这个按钮。
      这就是*Property*的价值。
  
      **The HTML attribute and the DOM property are not the same thing, even when they have the same name.**
      
      **就算名字相同，HTML Attribute和DOM Property也不是同一样东西。**
  
  :marked
    This is so important, we’ll say it again.
    
    这句话很重要，我们得再强调一次：
  
    **Template binding works with *properties* and *events*, not *attributes*.**
    
    **模板绑定是通过*Property*和*事件*来工作的，而不是*Attribute*。**
  
  .callout.is-helpful
  