Angular で非親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析

Angular で非親子コンポーネント間で通信するにはどうすればよいですか?この記事では、Angular非親子コンポーネントがサービスを通じてどのように通信するかを紹介します。

実際、親コンポーネントと子コンポーネント間で値を渡すことに関しては、私たちはよく知っており、ビジネス実装プロセスでは非常に一般的です。

しかし、私の実装にはクロスレベル (つまり、非親コンポーネントと子コンポーネント間の値の転送) が含まれています。はい、レイヤーごとに渡して親コンポーネントで取得できます。より良い方法はありますか?サブコンポーネントから値を渡す方法は? [関連チュートリアルの推奨事項: "angular チュートリアル"]

要件の背景:

にはサブコンポーネントがあり、これは 3 番目のコンポーネントとして理解できます。 -レベル コンポーネント。このコンポーネントにはドロップダウン ボックスがあります。特定の li タグをクリックすると、対応する選択された値が第 1 レベルのコンポーネントに渡される必要があります。同時に、第 1 レベルのコンポーネントは、 list インターフェイスに受信した値を入力し、データを更新します。

当初のアイデア:

当時は、ユーザーが選択した値をlocalstorageに保存し、コンポーネント内のlocalstorageから値を取り出すことを考えていました。この値要求インターフェイスは使用されています。ただし、リアルタイムで実装することはできません。ユーザーがこれを選択した後、親コンポーネントのデータを取得するトリガーはなりません。つまり、子コンポーネントの値が変更された場合、どのように変更されるか親コンポーネントに通知できますか?

技術的なポイント:

Angular の親コンポーネントと子コンポーネントはサービスを通じて通信します

親コンポーネントとその子コンポーネントの共有同じサービスは、コンポーネント ファミリ内で双方向通信を実装するために使用されます。

このサービス インスタンスのスコープは、親コンポーネントとその子コンポーネントに制限されます。このコンポーネント サブツリーの外側にあるコンポーネントは、サービスにアクセスしたり、サービスと通信したりできません。

原則

親コンポーネントとその子コンポーネントは同じサービスを共有し、このサービスを使用してコンポーネント ファミリ内で双方向通信を実現します## ＃。

実装:

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class HeaderActionService { public pageTenantMode = new Subject(); // 获得一个Observable; missionConfirmed$ = this.pageTenantMode.asObservable(); constructor() {} setParams(params) { this.pageTenantMode.next(params); } }

this.tenantModeService.setParams（）

headerModeService.missionConfirmed$.subscribe( () => { this.mode = headerModeService.pageTenantMode; this.initTableData(); } );

プログラミング入門! ！

以上がAngular で非親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。