Angularコンポーネントの仲介モードの詳細な説明

Angularコンポーネントの仲介モードの詳細な説明

1. 仲介業者モデル

コンポーネント 1 を除き、このコンポーネント ツリー内の各コンポーネントには、仲介役の役割を果たすことができる親コンポーネントがあります。最上位レベルの仲介者はコンポーネント 1 であり、これによりコンポーネント 2、3、および 6 が相互に通信できるようになります。同様に、コンポーネント 2 はコンポーネント 4 とコンポーネント 5 の間の仲介役となります。コンポーネント 3 は、コンポーネント 7 と 8 の間の仲介役です。

仲介者は、あるコンポーネントからデータを受信し、それを別のコンポーネントに渡す役割を担います。

2. 例

株価コンポーネントを例にとると、トレーダーが株価コンポーネントの価格を監視しているとします。株価が特定の値に達すると、トレーダーは購入ボタンをクリックして株を購入します。問題: 引用コンポーネントは、株式を購入する注文を出す方法を知らず、株価を監視するためにのみ使用されます。したがって、この時点で、引用コンポーネントは仲介者(つまり、APP コンポーネント)に通知して、トレーダーが特定の価格で特定の株を購入したいことを伝える必要があります。仲介業者は、どのコンポーネントが注文を完了できるかを把握し、そのコンポーネントに在庫コードと現在の価格を渡す必要があります。

1. 見積コンポーネントに購入ボタンを追加する

引用コンポーネントにボタンを追加します。株価が特定の価格に達すると、トレーダーはボタンをクリックしてその価格で株を購入できます。

<div>
  私は引用コンポーネントです</div>
<div>
  株式コードは {{stockCode}}、株価は {{price | number:"2.0-2"}} です
</div>
<div>
  <input type="button" value="今すぐ購入" (click)="$($event)">
</div>
@出力()
  購入:EventEmitter<PriceQuote>=新しいEventEmitter();

  buyStock(イベント){
    this.buy.emit(新しいPriceQuote(this.stockCode,this.price));
  }

2. 親コンポーネントがイベントを受信して​​処理する

親コンポーネントの購入イベントをリッスンし、現在の購入情報を取得します。

<app-price-quote (buy)="buyHandler($event)" ></app-price-quote>
  buyHandler(イベント:PriceQuote){
    this.priceQuote=イベント;
  }

見積情報は、属性バインディングを通じて注文コンポーネントに渡すことができます。

<app-order [priceQuote]="priceQuote"></app-order>

3. 注文コンポーネント

注文コンポーネントには、見積もりを受け取ってページに表示するための入力プロパティがあります。

  @入力()
  価格見積:価格見積;
<div>
  注文コンポーネントを配置しています</div>
<div>
  {{priceQuote.stockCode}} 株 100 ロットを {{priceQuote.lastPrice | number:"2.2-2"}} で購入
</div>

4. 運用結果

見積コンポーネントの価格は常に変化しています。[今すぐ購入] をクリックすると、現在の株式が現在の価格で購入されます。ボタンをクリックするたびに更新されます。

利点: 見積コンポーネントには注文コンポーネントに関連するコードがなく、見積コンポーネントは注文コンポーネントの存在すら認識しません。引用コンポーネントは、購入時の株式シンボルと株価を単純に出力します。同様に、注文コンポーネントには見積コンポーネントに関連するものは何もありません。見積コンポーネントと注文コンポーネントは連携して動作し、互いを知らなくても在庫注文を出す機能を実行します。コンポーネントの再利用率が高い。

3. 仲介者としてのサービスの利用

2 つのコンポーネントに共通の親コンポーネントがなく、一緒に表示されない場合、どのように通信できるでしょうか?たとえば、記事の冒頭の図のコンポーネント 4 と 6 です。

この場合、注入可能なサービスを仲介者として使用する必要があります。コンポーネントが作成されるたびに、仲介サービスが挿入されます。コンポーネントは、サービスによって発行されるイベントのストリームをサブスクライブできます。

Angular を使用してアプリケーションを開発する前に、注文コンポーネント、見積コンポーネントなど、どの再利用可能なコンポーネントを作成するか、どのコンポーネントとサービスがどのコンポーネントの仲介役として機能するかを深く考えて設計する必要があります。コンポーネントの入力と出力は何で、コンポーネントは互いにどのように通信するのでしょうか。次にコードを書き始めます。

以上がAngularコンポーネントの仲介モードの詳しい説明です。Angularコンポーネントの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • Angularの親子コンポーネント通信の詳細な説明
  • Angularの動的コンポーネントの詳細な説明
  • Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
  • Angularコンポーネント間の通信の実装例
  • 角度コンポーネント間の値転送テスト方法の詳細な説明
  • Angular7はプロジェクト、コンポーネント、サービスを作成し、サービスを使用します
  • Angular イベント: 異なるコンポーネント間でデータを渡す方法
  • Angularjs1.5 関数を使用してコンポーネントの外部に値を渡す例
  • Angular6 学習ノートの詳細説明: マスタースレーブコンポーネント

<<:  Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

>>:  Ubuntu の MySQL のパラメータ ファイル my.cnf の詳細な分析

推薦する

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...

JavaScript 配列の include と Reduce の基本的な使用法

目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...

Vueは複数の画像の追加、表示、削除を実装します

この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...

MySQL での実行計画の詳細分析

序文効率的なSQL文の書き方は、Explain実行計画の分析と切り離せません。実行計画とは何か、効率...

Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握

目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

MySQL InnoDB ロックの概要

目次1. 共有ロックと排他ロック2. 意図ロック3. レコードロック4. ギャップロック5. ネクス...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践の概要

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

JavaScript ウェブページ入門開発詳細説明

パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...

MySQLの基本操作学習ノートテーブル

テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...

Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...