angular2 rc6事件发射器-父子交互示例

我正在寻找一个例子来解释在angular2-rc6版本（不再使用指令）中如何使用事件发射进行父子交互。大多数在线可用的链接似乎都有指令标签功能（angular2的旧版本）。

请参阅上的此链接

VoterComponent

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'my-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
@组成部分({
选择器：“我的选民”，
模板：`
{{name}}
同意
不同意
`
})
导出类VoterComponent{
@Input（）名称：string；
@Output（）onVoted=neweventemitter（）；
投票=错误；
表决（同意：布尔值）{
此.onVoted.emit（已同意）；
这是真的；
}
}

VoteTakerComponent

import { Component }      from '@angular/core';
@Component({
  selector: 'vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <my-voter *ngFor="let voter of voters"
      [name]="voter"
      (onVoted)="onVoted($event)">
    </my-voter>
  `
})
export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择人：“投票人”，
模板：`
人类应该殖民宇宙吗？
同意：{{同意}}，不同意：{{不同意}
`
})
导出类VoteTakerComponent{
同意=0；
不同意=0；
选民=['IQ先生'，'Universe女士'，'Bombasto']；
已表决（同意：布尔值）{
同意？这个。同意++：这个。不同意++；
}
}

希望这有帮助