1
event2を使用した親子インタラクションがangular2-rc6バージョンで動作する方法(ディレクティブをもう使用しない)を説明する例を探しています。オンラインで利用可能なリンクのほとんどは、ディレクティブのタグ機能(古いバージョンのangular2)を持っているようです。angular2 rc6イベントエミッター - 親子インタラクションの例
event2を使用した親子インタラクションがangular2-rc6バージョンで動作する方法(ディレクティブをもう使用しない)を説明する例を探しています。オンラインで利用可能なリンクのほとんどは、ディレクティブのタグ機能(古いバージョンのangular2)を持っているようです。angular2 rc6イベントエミッター - 親子インタラクションの例
ホープ、このことができます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++;
}
}
にこのリンクを参照してください!!