2016-09-28 6 views
1

event2を使用した親子インタラクションがangular2-rc6バージョンで動作する方法(ディレクティブをもう使用しない)を説明する例を探しています。オンラインで利用可能なリンクのほとんどは、ディレクティブのタグ機能(古いバージョンのangular2)を持っているようです。angular2 rc6イベントエミッター - 親子インタラクションの例

答えて

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

にこのリンクを参照してください!!

関連する問題