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

Question

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

Answer 1

查看COMPONENT INTERACTION

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; 
    } 
} 

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++; 
    } 
} 

希望这有助于此链接！