anchor.diff:    ## Parent and children communicate via a service
     ## 父级和子级通过服务来交互
   
  -  A parent component and its children share a service whose interface enables bi-directional communication
  -  *within the family*.
  -  
  -  一个父级组件和它的子级组件共享一个服务，这个服务的接口*在本家庭之内*实现双向交互能力。
  -
  -  The scope of the service instance is the parent component and its children. 
  -  Components outside this component subtree have no access to the service or their communications.
  -  
  -  该服务实例的作用范围限制在父级组件和其子级组件内。在这个组件子树之外的组件无法访问该服务或者它们之间的交互。
  +  A parent component and its children share a service whose interface enables bi-directional communication *within the family*.
  +  
  +  父级组件和它的子级组件共享一个服务，利用该服务*在本家庭之内*实现双向交互。
  +
  +  The scope of the service instance is the parent component and its children. Components outside this component subtree have no access to the service or their communications.
  +  
  +  该服务实例的作用范围被限制在父级组件和其子级组件内。在这个组件子树之外的组件无法访问该服务或者它们之间的交互。
     
     This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children.
     
  
positive.code: <a id="parent-to-child-local-var"></a>
  :marked
    ## Parent interacts with child via *local variable*
    ## 父级与子级通过本地变量local variable互动
    
    A parent component cannot use data binding to read child properties
    or invoke child methods. We can do both 
    by creating a template reference variable for the child element
    and then reference that variable *within the parent template*
    as seen in the following example.
    
    一个父级组件不能使用数据绑定来读取子级属性或者调用子级类方法。我们可以在父级模板里，新建一个本地变量来代表子组件，然后实用这个变量来读取子级属性和调用子级类方法，如下例所示。
  
    <a id="countdown-timer-example"></a>
    We have a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
    It has `start` and `stop` methods that control the clock and it displays a
    countdown status message in its own template.
    
    <a id="countdown-timer-example"></a>
    我们有一个子级组件`CountdownTimerComponent`，他反复的倒计时到零，然后发射一个导弹。他有一个`start`和`stop`方法，用来控制时间和在自己的模板里面显示一个倒计时状态的信息。
  +makeExample('cb-component-communication/ts/app/countdown-timer.component.ts')
  :marked
    Let's see the `CountdownLocalVarParentComponent` that hosts the timer component.
    
    让我们来看看计时器组件的寄主组件`CountdownLocalVarParentComponent`。
    
  +makeExample('cb-component-communication/ts/app/countdown-parent.component.ts', 'lv')
  :marked
    The parent component cannot data bind to the child's 
    `start` and `stop` methods nor to its `seconds` property.
    
    父级组件不能数据绑定到子级的`start`和`stop`方法，也不能绑定到子级的`seconds`属性
    
    We can place a local variable (`#timer`) on the tag (`<countdown-timer>`) representing the child component.
    That gives us a reference to the child component itself and the ability to access
    *any of its properties or methods* from within the parent template.
    
    我们能把本地变量(`#timer`)放到(`<countdown-timer>`)标签中，用来代表子级组件。这样我们就在父级组件获取子级组件的引用载体，在父级组件内访问子级的所有属性和方法。
   
    In this example, we wire parent buttons to the child's `start` and `stop` and
    use interpolation to display the child's `seconds` property.
    
    在这个例子中，我们把父级组件的按钮链接到子级的`start`和`stop`方法，并用插值表达式来显示子级的`seconds`属性。
    
    Here we see the parent and child working together.
    
    在这里我们看到父级和子级一起工作。
  
  figure.image-display
    img(src="/resources/images/cookbooks/component-communication/countdown-timer-anim.gif" alt="countdown timer")
  
negative.code:   ### Test it
    ### 测试
    
    Test that ***both*** input properties are set initially and that button clicks trigger the expected `ngOnChanges` calls and values:
    
    测试确认***两个***Input属性值都被初始化了，并在点击按钮后，`ngOnChanges`被调用，属性值的按预期变化。
    
  +makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child-onchanges')
  
  :marked
    [Back to top](#top)
    [回到顶部](#top)
    
  .l-main-section
  <a id="child-to-parent"></a>
  :marked
    ## Parent listens for child event
    ## 父级监听子级事件
    
    The child component exposes an `EventEmitter` property with which it `emits`events when something happens. The parent binds to that event property and reacts to those events.
    
    子级组件暴露一个`EventEmitter`属性，当事情发生时，子级组件利用该属性`散发`事件。父级绑定这个事件属性，并在事件发生时作出回应。
    
    The child's `EventEmitter` property is an ***output property***, typically adorned with an [@Output decoration](../guide/template-syntax.html#inputs-outputs) as seen in this `VoterComponent`:
      
    子级组件的`EventEmitter`属性是一个**Output属性**，通常用[@Output装饰器](../guide/template-syntax.html#inputs-outputs)来装饰，正如在`VoterComponent`中所见。
    
  +makeExample('cb-component-communication/ts/app/voter.component.ts')
  
  :marked
    Clicking a button triggers emission of a `true` or `false` (the boolean *payload*).
    
    点击按钮触发`true`或`false`的事件（布尔酬载）
    
    The parent `VoteTakerComponent` binds an event handler (`onVoted`) that responds to the child event payload (`$event`) and updates a counter.
    
    父级`VoteTakerComponent`绑定一个事件处理器(`onVoted`)，用来回应子组件时间事件(`$event`)并更新一个计数器。
    
  +makeExample('cb-component-communication/ts/app/votetaker.component.ts')
  
  :marked
    The framework passes the event argument &mdash; represented by `$event` &mdash; to the handler method, and the method processes it:
    
    框架（Angular）传递利用`$event`把事件参数传给事件处理函数方法，由这个函数方法来处理：
    
  figure.image-display
    img(src="/resources/images/cookbooks/component-communication/child-to-parent.gif" alt="Child-to-parent")
  