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の他の関連記事もご覧ください。

以下もご興味があるかもしれません: