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の他の関連記事もご覧ください。 以下もご興味があるかもしれません:
|
<<: Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル
>>: Ubuntu の MySQL のパラメータ ファイル my.cnf の詳細な分析
次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...
目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...
序文効率的なSQL文の書き方は、Explain実行計画の分析と切り離せません。実行計画とは何か、効率...
目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...
序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...
目次1. 共有ロックと排他ロック2. 意図ロック3. レコードロック4. ギャップロック5. ネクス...
目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...
パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...
テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...