AngularのEventEmitterと@Outputを使用したコンポーネントイベント

by Posted on

Angularコンポーネントは、アーキテクチャの基本的な構 コンポーネントアーキテクチャを理解したら、データ通信に基づいてインターフェイスを組み立てる方法について頭の中で絵を描くことができます。

この記事では、AngularコンポーネントとEventEmitterとOutputsの使用方法について説明します。 これは通常、”events”、したがって”EventEmitter”を介して行われ、アプリケーション開発にはるかに合理的なアプローチを採用する単方向のデータフローシステムを中心に設計さ

EventEmitterと@Outputを導入して、親子コミュニケーションと親子コミュニケーションの基礎を完成させましょう。

Series

  1. 最初のAngularアプリのブートストラップ
  2. 最初のAngularコンポーネントの作成
  3. @Input
  4. Eventemitterと@Outputを使用したコンポーネントイベントをAngular

はじめに

このチュートリアルでは、EventEmitterApiと@Outputデコレータを使用したステートレスコンポーネントイベントについて説明します。 これらにより、Angularのカスタムコンポーネントから変更またはカスタムイベント名を出力できます。

この投稿は、@Inputを使用して角度コンポーネントにデータを渡すという前回の記事に続きますので、最初に必ず読んでください！

Stateful(parent)component binding

前のチュートリアルで@Inputデコレータを設定して入力バインディングを受け入れるようにしたのと同じように、子コンポーネント内で値が変更されたときに親でリッスンすることができます。

これを行うには、カウントをレンダリングしている親コンポーネントに戻ります。

ここでいくつかの追加を行いました:

  • initialCountをmyCountに変更し、”initialCount”を設定しなくなったため、子コンポーネントが
  • カスタムchangeプロパティを<counter>テンプレートに作成し、()イベントバインド構文を使用して、()イベントバインディング構文を使用して、これはある種のイベントを意味します(例えば、イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()イベントバインディング構文を使用して、()clickネイティブ要素ノードで使用される場合)。
  • は親のmyCountプロパティを記録しました
  • はクラスにcountChange() {}メソッドを追加し、それを(change)イベントリスナーに渡しました

🎉 それを無料でダウンロード！

配列ForEachを超えてください。 Reduce、Find、Filter、Every、Some、Mapなどのより高度なメソッドに自信を持ち、JavaScriptのデータ構造を管理する方法を完全に理解してください。

  • 不変操作を使用してJavaScriptデータ構造を管理する方法を完全に理解する
  • 31 深いダイブ構文、実際の例、ヒントとトリックのページ
  • 3時間以内にクリーンでより良い構造化されたプログラミングロジックを書く

✅ 成功！ あなたの電子メールをチェックして、お楽しみください。

余分なボーナスとして、我々はまた、いくつかの余分な電子メール全体であなたにいくつかの余分なグッズを送信します。

これは私達の最終化された単方向のデータフローをセットアップする。 データはAppComponentクラスから`に流れ落ち、カウンタは値を変更することができます-値が変更されるとcountChange()が呼び出されることが期待されます。 これを配線する必要があります。

@Output decorator

Inputを使用するのと同じように、Outputをインポートして、新しいchangeプロパティを私たちの内部に飾ることができますCounterComponent:

これにより、このプロパティが出力バインディングとして扱われるようにAngularに指示するために必要なメタデータが構成されます。 しかし、それはEventEmitterと呼ばれるものと一緒に座る必要があります。

EventEmitter

これは興味深い部分です。 私たちのOutputを使用できるようにするには、EventEmitterの新しいインスタンスをインポートしてバインドする必要があります：

TypeScriptを最大限に使用して、私たちが発 私たちのケースでは、numberタイプを出力しています：

EventEmitter

を呼び出すので、ここで何が起こっていますか？ 私たちはchangeプロパティを作成し、EventEmitterの新しいインスタンスをそれにバインドしました-次は何ですか？

単純にthis.changeメソッドを呼び出すことができますが、EventEmitterのインスタンスを参照するため、.emit()を呼び出して親にイベントを出力する必要があります。

これにより、親に設定した(change)リスナに変更が出力され、countChange($event)コールバックが呼び出され、イベントに関連付けられたデータが$eventプロパティを介して渡されます。

ステートフルコールバック割り当て

ここでは、渡されたeventでthis.myCountを再割り当てする必要があります。 私は以下の理由を説明します：

これは純粋な単方向データフローを作成します。 データはAppComponentから来て、カウンタに流れ込み、カウンタは変更を行い、その変更をコマンドで親に戻します-設定したEventEmitterを介して。 そのデータをバックアップしたら、それらの変更を親（ステートフル）コンポーネントにマージします。

これを行っている理由は、Parent: {{ myCount }}が親に通知すると同時にOutputを更新することを実証するためです。

ボーナス：カスタムプロパティ名

@Input()で学んだように、カスタムプロパティ名を作成すると、@Output()でも同じことができます。

(change)バインディングを次のように変更するとしましょう(update):

内部の@Outputプロパティ名を保持しながら、カスタムプロパティ名をフックすることができます：

基本的に、ここでAngularにupdateをバインドするプロパティとし

だから、あなたはそれを持っている、AngularのコンポーネントでEventEmitterで出力を使用するためのガイド。 今、あなたはモデル、幸せなコーディングを理解しています！

より多くのテクニック、ベストプラクティス、現実世界の専門知識を学ぶために、私は非常に私のAngularコースをチェックアウトすることをお勧めします-彼らは最大限にAngularをマスタリングするためのあなたの旅をご案内します！

Published by admin

コメントを残す

メールアドレスが公開されることはありません。