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 の詳細な分析

推薦する

「MySQL サービスを開始できません エラー 1069」を解決する方法

今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

トップナビゲーションバー機能を実現するCSS+HTML

ナビゲーション バー、固定トップ ナビゲーション バー、およびセカンダリ メニューの実装効果図の実装...

vue3 コンポーネント通信方法の概要と例

vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...

Faint: 「Web2.0 を使用して標準に準拠したページを作成する」

今日、ある人がウェブサイト開発プロジェクトについて話をしてくれました。具体的な要件について話すと、「...

MySQLにおけるビューの作成(CREATE VIEW)と使用制限の詳しい説明

この記事では、例を使用して、MySQL ビューの作成 (CREATE VIEW) と使用上の制限につ...

Vue computedのキャッシュ実装原理の詳細な説明

目次計算結果を初期化する依存関係の収集アップデートを配布する総括するこの記事では、計算された初期化と...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

HTML チュートリアル: HTML 水平線分

<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...

MySqlデータベースをバックアップするいくつかの方法

mysqldump ツールのバックアップデータベース全体をバックアップする $> mysqld...

JavaScript で長い画像のスクロール効果を実装する

この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...

高さ:100% が機能しないのはなぜですか?

高さ:100% が機能しないのはなぜですか?この知識は不人気ではありませんが、使用する際には混乱する...

Vueのインストール方法の紹介

目次1. グローバルに登録されたコンポーネント2. グローバルカスタム指示vue 、新しいプラグイン...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...