1. ホーム
  2. アンギュラー

[解決済み】EventEmitterの正しい使い方とは?

2022-04-03 14:56:44

質問

以下のような質問を読んだことがあります。 CustomHttpの内部でEventEmitterサービスにアクセスする で、ユーザーが自分のサービスでEventEmitterを使っているのですが、このように提案されました。 コメント を使用せず、代わりにObservablesを直接サービス内で使用するようにしました。

また、こんなことも書いてありました。 質問 解決策は、子プロセスに EventEmitter を渡して、それにサブスクライブすることを提案しています。

そこで質問ですが、EventEmitterを手動でサブスクライブするべきか、しないべきか?どのように使うべきでしょうか?

どのように解決するのですか?

TL;DR :

いいえ、手動でサブスクライブしたり、サービスで使用したりしないでください。ドキュメントにあるように、コンポーネントでイベントを発生させるためだけに使用してください。angularの抽象性を損なわないようにしましょう。

回答

いいえ、手動で購読するべきではありません。

イベントエミッター はangular2の抽象化であり、その唯一の目的はコンポーネントのイベントを発行することです。引用元 コメント Rob Wormaldより

[...] EventEmitterは実際にはAngularの抽象化であり、コンポーネントでカスタムイベントを発行するためにのみ使用されるべきものです。それ以外の場合は、Rxを他のライブラリと同じように使ってください。

このことは、EventEmitterのドキュメントで実に明確に述べられています。

<ブロッククオート

ディレクティブやコンポーネントがカスタムイベントを発行するために使用します。

使って何が悪い?

Angular2は、EventEmitterがObservableであり続けることを決して保証しません。つまり、もし変更されたらコードをリファクタリングすることになる。私たちがアクセスしなければならない唯一のAPIは、その emit() メソッドを使用します。EventEmitter に手動でサブスクライブすることは決してあってはならない。

上記のことは、このワード・ベルの コメント (記事を読むことをお勧めします。 回答 というコメントがあります。) 参考までに引用

<ブロッククオート

EventEmitterがObservableであり続けることを当てにしないでください!

Observableオペレータが将来も存在するとは思わないでください。

これらはすぐに非推奨となり、おそらくリリース前に削除されるでしょう。

EventEmitterは、子コンポーネントと親コンポーネント間のイベントバインディングにのみ使用してください。サブスクライブしないでください。これらのメソッドを一切呼び出さないでください。のみを呼び出す。 eve.emit()

彼のコメントは、昔、ロブが言ったコメントと一致する。

では、正しい使い方を教えてください。

コンポーネントからイベントを発生させるために使用します。次の例を見てください。

@Component({
    selector : 'child',
    template : `
        <button (click)="sendNotification()">Notify my parent!</button>
    `
})
class Child {
    @Output() notifyParent: EventEmitter<any> = new EventEmitter();
    sendNotification() {
        this.notifyParent.emit('Some value to send to the parent');
    }
}

@Component({
    selector : 'parent',
    template : `
        <child (notifyParent)="getNotification($event)"></child>
    `
})
class Parent {
    getNotification(evt) {
        // Do something with the notification (evt) sent by the child!
    }
}

使わない方法とは?

class MyService {
    @Output() myServiceEvent : EventEmitter<any> = new EventEmitter();
}

そこでやめてくれ...もう間違ってる...。

この2つの簡単な例で、EventEmitterの正しい使い方が明らかになれば幸いです。