Angular 中的 BehaviorSubject 與 Observable

1. Angular 中下 BehaviorSubject 和 Observable 的主要區別
2. Angular 中的 Observable
3. Angular 中的 BehaviorSubject 是什麼
4. Angular 中的 BehaviorSubject 示例

Angular BehaviorSubject 是一個主體，它發出源 Observable 發出的最後一個值。相反，observable 用於隨時間發出值。

Angular 使用它們來處理事件或資料流，例如 HTTP 請求或使用者輸入。當需要通知觀察者物件的狀態更改時，通常也會使用它們。

詳細來說，讓我們討論一下 BehaviorSubject 和 Observable 之間的區別。

Angular 中下 BehaviorSubject 和 Observable 的主要區別

BehaviorSubject 是具有定義特徵的 Angular observable；它理論上是 Observable 的子型別； Observable 是通用的。在 BehaviorSubject 的幫助下，可以使用一個主題來構造一個可觀察的物件。

主要區別在於你不能使用 next() 方法將資料傳遞給 observable。

讓我們討論 Angular Observable 和 BehaviorSubject 的基本概念。

Angular 中的 Observable

在 Angular 應用程式中，RxJS 提供 observables； observables 促進了作者和使用者之間的資料共享。

Observable 是事件管理、非同步計算和管理多個屬性的更好策略。

Observables 的一個獨特方面是它們只能由訂閱它們的使用者處理，就像訂閱的消費者沒有實現元件一樣。使用者只能在訂閱之前接收更新。

Angular 中的 BehaviorSubject 是什麼

通常，該主題以三種方式實現，每種方式提供不同的能力並且可以應用於各種應用。

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 高效。

點選這裡檢視程式碼的演示。