Angular2实现组件交互的方法分析

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

<h3>"{{name}}"</h3>
private _name = '';
@Input()
set name(name: string) { this._name = (name && name.trim()) || '<no name set>'; }
get name(): string { return this._name; }

<name-child [name]="myname"></name-child>

seconds = 11;
s() { this.message = `Holding at T-${this.seconds} seconds`;  }

<button (click)="timer.s()">S</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>