web-dev-qa-db-ja.com

Angular 2？）

出力イベントを持つネストされた子コンポーネントがあります。親コンポーネントからこのイベントをリッスンしたいのですが、方法がわかりません。4つのレベルがあります。

イベントを子供3から子供2に、子供2から子供に、そして親に渡そうとしましたが、これは最善の方法ではないと思います。

-Parent (From this I want listen the event)
--Child
----Child 2
------Child 3 (This have the Event)
angulareventscomponentsparent-child
7
juanjinario

@Outputイベントエミッターを使用してこれを行うこともできますが、入れ子には非常に多くのレベルがあるため、通信を処理する共有サービスを作成することをお勧めします。

以下のようなことができ、両方のコンポーネントにサービスを注入できます。 1つはメッセージ（ネストされた子コンポーネント）を発行し、もう1つはメッセージ（最上位コンポーネント）を待機します。

サービスを定義する

@Injectable({
    providedIn: 'root'
})
export class CommunicationService {
    @Output() message$: EventEmitter<boolean> = new EventEmitter();

    sendMessage(message: String) {
        this.change.emit(message)
    }
}

コンポーネントに注入します

constructor(private communicationService: CommunicationService) { }

メッセージを送信するコンポーネント

sendMessage() {
    this.communicationService.sendMessage('This is a message from deep below!');
}

リスナーコンポーネントで、イベントエミッターをサブスクライブします。

ngOnInit() {
    this.communicationService.message$.subscribe(message => {
      console.log(message);
    });
}
1
Daniel B