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

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

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

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

要件の背景:

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

当初のアイデア:

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

技術的なポイント:

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

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

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

原則

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

このサービス インスタンスのスコープは、親コンポーネントとその子コンポーネントに制限されます。このコンポーネント サブツリーの外側にあるコンポーネントは、サービスにアクセスしたり、サービスと通信したりできません。 サービスは子コンポーネントと親コンポーネントの間のブリッジです。サービスは他のコンポーネントに簡単に挿入でき、Subject オブジェクトはこのオブジェクトをサブスクライブするコンポーネントにデータをマルチキャスト (送信) できるため、Rxjs の Angular Service および Subject と組み合わせることで、コンポーネント間のデータ通信を簡単に実現します。

実装:

サブコンポーネントにサービス ファイルを作成します。コードは次のとおりです。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个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 サイトの他の関連記事を参照してください。