Angularで2つの無関係なコンポーネント間でデータを共有する最も簡単な方法

Angularで2つの無関係なコンポーネント間でデータを共有する最も簡単な方法

Angularでは、コンポーネントが相互にどのように通信するかを知ることが不可欠です。別のコンポーネント内でコンポーネントを使用すると、親子関係が作成されます。 このようなシナリオでは、親コンポーネントと子コンポーネントは次の方法で相互に通信します。@Inputの詳細については、こちらで、@Outputについてはこちらをご覧ください。この [...]

3min read

Angularでは、コンポーネントが相互にどのように通信するかを知ることが不可欠です。別のコンポーネント内でコンポーネントを使用すると、親子関係が作成されます。 このようなシナリオでは、親コンポーネントと子コンポーネントは、次の方法で相互に通信します。

  • @Input()
  • @Output()
  • テンプレート参照変数（Temp Ref Variable）
  • ViewChild and ContentChild

については@Inputこちらと@Outputについて詳しく学ぶことができます。このブログ投稿では、Angular Service を使用して、相互に関連しないコンポーネント間でデータを共有する方法について説明します。

Angularで2つの無関係なコンポーネント間でデータを共有する最も簡単な方法

例を使用してこれを理解するには、サービスを作成します。 サービスで、countという変数を作成します。 サービスは、コンポーネント間でカウント変数の値を共有します。カウント変数を作成する前に、要件についてもう一度話しましょう。すべてのコンポーネントが、サービスを使用して共有されたデータの最終更新値にアクセスする必要があります。

このためには、RxJSサブジェクトでcount変数をラップする必要があります。正確には、BehaviorSubjectを使用しましょう。

counter = 1;
count: BehaviorSubject<number>;
constructor() {
   this.count = new BehaviorSubject(this.counter);
}

BehaviorSubject を使用している理由は次のとおりです。

  1. サービスからのデータはマルチキャストする必要があります。各コンシューマー コンポーネントは、データの同じコピーにアクセスする必要があります。そのために、BehaviorSubjectを使用します。
  2. オブザーバブルは本質的にユニキャストであるため、使用していません。サブスクライバーは、独自のデータ コピーを持ちます。
  3. BehaviorSubject は現在の値を格納します。したがって、コンポーネントは、常に BehaviorSubject に保存されているデータの現在の値を読み取ります。

すべてをまとめると、単純なデータを共有するサービスは、次のコードリストのようになります。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
    providedIn: 'root'
})
export class AppService {
    counter = 1;
    count: BehaviorSubject<number>;
    constructor() {
 
        this.count = new BehaviorSubject(this.counter);
    }
 
    nextCount() {
        this.count.next(++this.counter);
    }
}

これで、コンポーネントはサービスを使用して共有データにアクセスできるようになりました。たとえば、コンポーネントでは、次のリストに示すようにサービスを消費できます。

export class Appchild2Component implements OnInit {
 
    count: number;
    constructor(private appsevice: AppService) {
    }
    ngOnInit() {
 
        this.appsevice.count.subscribe(c => {
            this.count = c;
        });
    }
    nextCount() {
        this.appsevice.nextCount();
    }
}

serviceをサブスクライブし、ローカル変数のcountの値を読み取っています。さらに、カウントをインクリメントする機能があります。 テンプレートでは、次のコードリストに示すように、共有データを表示およびインクリメントできます。

<h2>Count in component2  =  {{ count }}</h2>
<button (click)='nextCount()'>Next Count from component2</button>

このようにして、できるだけ多くのコンポーネントでサービスを消費し、サービスから同じデータを共有できる場所をどこでも使用できます。参考までに、ここで動作するstackblitzを見つけることができます。

私の意見では、これはAngularで無関係なコンポーネント間でデータを共有できる最も簡単な方法です。より複雑なシナリオには、より良い方法があると確信しています。他のオプションを知っている場合は、以下のコメント欄でいくつかのアイデアを提案してください。

How To Angular
デモを予約