Angular での BehaviorSubject と Observable

1. Angular での BehaviorSubject と Observable の主な違い
2. Angular で Observable とは
3. Angular の BehaviorSubject とは
4. Angular での BehaviorSubject の例

AngularBehaviorSubject は、ソース Observable によって放出された最後の値を放出するサブジェクトです。対照的に、observable は時間の経過とともに値を出力するために使用されます。

Angular はそれらを使用して、HTTP リクエストやユーザー入力などのイベントやデータストリームを処理します。これらは通常、オブザーバーにオブジェクトの状態変化を通知する必要がある場合にも使用されます。

詳細に、BehaviorSubject と Observable の違いについて説明しましょう。

Angular での BehaviorSubject と Observable の主な違い

BehaviorSubject は、定義された機能を備えた Angular observable です。理論的には Observable のサブタイプです。Observable は一般的です。サブジェクトは、BehaviorSubject の助けを借りてオブザーバブルを構築するために使用できます。

主な違いは、next() メソッドを使用してデータをオブザーバブルに配信できないことです。

Angular の Observable と BehaviorSubject の基本的な概念について説明しましょう。

Angular で Observable とは

Angular アプリケーションでは、RxJS がオブザーバブルを提供します。オブザーバブルは、作成者とユーザー間のデータ共有を容易にします。

Observable は、イベント管理、非同期コンピューティング、および複数の属性の管理に適した戦略です。

Observables のユニークな側面は、コンポーネントがサブスクライブされたコンシューマーによって実装されていないように、それらをサブスクライブしたユーザーのみが処理できることです。ユーザーは、サブスクライブするまで更新を受け取ることができます。

Angular の BehaviorSubject とは

一般に、主題は 3つの方法で実装され、それぞれが異なる機能を提供し、さまざまなアプリケーションに適用できます。

1. ReplaySubject：このオブジェクトは、プッシュされたすべての値を追跡します。ソースから放出されたすべてのアイテムを、それをサブスクライブしているすべてのオブザーバーに配布します。
2. BehaviorSubject：現在の値を格納するものです。BehaviorSubject にサブスクライブするオブザーバーは、時間の経過とともに値を受け取ります。
3. AsyncSubject：最新の値を保存し、シーケンスが終了するたびに送信します。

Angular の BehaviorSubject を使用すると、Observable に値を送信および取得できます。たとえば、アクセス制御ステータスは、進化する値を提供する BehaviorSubject です。

このシナリオでは、BehaviorSubject の主な目標は、すべてのユーザーが最終的な値を確実に受け取れるようにすることです。

サブスクリプションで常に値を提供する必要があるため、次の値を取得していなくても、動作トピックには開始値が必要です。サブスクリプション時にサブジェクトの最新の値を返します。

getValue() メソッドを使用して、監視不可能なコード内のサブジェクトの最後の値にいつでもアクセスできます。

さらに、初期状態を反映するために、引数が BehaviorSubject 関数 Object() に提供されます。状態の要件が確立され、さらにサブスクリプションが作成されると、BehaviorSubject が最新の状態を最初に提供します。

Angular での BehaviorSubject の例

上記の議論をよりよく理解するために、例について議論しましょう。

App.component.ts：

import { Component } from "@angular/core";
import { BehaviorSubject } from "rxjs";
interface Directory {
  name: string;
  id: string;
}
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string;
  id: string;

  directories: BehaviorSubject<Directory[]> = new BehaviorSubject<Directory[]>(null);
  constructor() {
    this.directories.next([
    ]);
  }
  add() {
    const currentItems = this.directories.getValue();
    currentItems.push({ name: this.name, id: this.id });
  }
  delete() {
    const currentItems = this.directories.getValue();
    const itemsWithoutDeleted = currentItems.filter(d => d.id !== this.id);
    this.directories.next(itemsWithoutDeleted);
  }
}

App.component.html：

<h1>Example of Angular BehaviorSubject</h1>
<h3>Write anything in the box that you want to add in the directory list.</h3>
<ul>
	<li *ngFor="let directory of (directories | async)">
		{{ directory.name }}
	</li>
</ul>
<input type="text" [(ngModel)]="name" size="20" />
<br/>
<br/>
<button (click)="add()">Add</button>
<br/>
<br/>
<button (click)="delete()">Delete</button>
<hr />

BehaviorSubject は、ソース Observable によって発行された最後の値を発行します。これは、特定の時間枠で最新の値を保持する必要がある場合に役立ちます。

オブザーバブルは、データセットのすべての変更を知る必要がある場合に役立ちますが、新しい値でデータを更新する場合は BehaviorSubject ほど効率的ではありません。

コードのライブデモンストレーションを確認するには、ここををクリックしてください。