角度2イベントエミッタ？

リーフコンポーネントから放出されたイベントをルートコンポーネントでのみ捕捉できますか？私はこれに関する情報を見つけられませんでした。角度2イベントエミッタ？

2016-05-04 Nicu

実際、親コンポーネントの子コンポーネントからのカスタムイベントに対してのみ通知を受けることができます。

ユースケースを実装するには、ルートコンポーネントのproviders属性で指定する共有サービスを実装する必要があります。この方法で、このコンポーネントとその子要素のすべてのグラフと共有されます。

このサービスには観察可能な/件名が含まれています。リーフがイベントをトリガーしたいとき、リーフは、このオブザーバブルまたはサブジェクトに関連付けられたオブザーバを活用します。ルートコンポーネントは、この通知可能/通知対象のサブジェクトにサブスクライブします。

ここに実装例があります。最初のサービス：

export class EventService { 
    subject$: Subject<any> = new Subject(); 
}

ルートコンポーネント：

@Component({ 
    (...) 
    providers: [ EventService ] 
    (...) 
}) 
export class RootComponent { 
    constructor(private service:EventService) { 
    this.eventService.subject$.subscribe(event => { 
     // Execute when the event is received from leaf component 
    }); 
    } 
}

葉のコンポーネント：

@Component({ 
    (...) 
    template: ` 
    <div (click)="emitEventToRoot()">Emit event</div> 
    ` 
}) 
export class LeafComponent { 
    constructor(private service:EventService) { 
    } 

    emitEventToRoot() { 
    // Send the event to the root component 
    this.eventService.subject$.emit('some event'); 
    } 
}

これらのリンクは、あなたの興味ができます

出典

2016-05-04 21:08:44

角度2イベントエミッタ？

答えて

関連する問題