[解決済み】EventEmitterの正しい使い方とは?
質問
以下のような質問を読んだことがあります。 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の正しい使い方が明らかになれば幸いです。
関連
-
[解決済み] Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'.
-
[解決済み] 型 '{}' は型 '{ title: string; text: string; }' に代入できません。
-
[解決済み] 未定義のプロパティ 'filter' を読み取ることができません。
-
[解決済み] <selector>' が Angular コンポーネントの場合、それがこのモジュールの一部であることを確認する。
-
[解決済み] ブレークポイントの解除 - VS Code | Chrome | Angular
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】Angular-CLIでコンポーネントを作成し、特定のモジュールに追加する。
-
[解決済み] Angular2 http.get()、map()、subscribe()とobservableパターン - 基本的な理解
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular 6 エラー表示から 'mat-form-field' は既知の要素ではありません。
-
[解決済み] <selector>' が Angular コンポーネントの場合、それがこのモジュールの一部であることを確認する。
-
[解決済み] エラーです。複数のモジュールがマッチしました。skip-import オプションを使用して、最も近いモジュールへのコンポーネントのインポートをスキップしてください。
-
[解決済み] Angular 2のコンポーネントプロパティにデフォルト値を設定する方法は?
-
[解決済み] Angular CLIでピア依存をインストールする場合の対処方法は?
-
[解決済み] CLIでコンポーネントを削除する最も良い方法は何ですか?
-
[解決済み] プロパティ 'json' はタイプ 'Object' に存在しません。
-
[解決済み] "rxjs" observable.throw は関数ではありません - Angular4
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。
-
[解決済み】Delegation: AngularのEventEmitterまたはObservable