Angular 中的 BehaviorSubject 與 Observable

Muhammad Adil 2023年1月30日
  1. Angular 中下 BehaviorSubjectObservable 的主要區別
  2. Angular 中的 Observable
  3. Angular 中的 BehaviorSubject 是什麼
  4. Angular 中的 BehaviorSubject 示例
Angular 中的 BehaviorSubject 與 Observable

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

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

詳細來說,讓我們討論一下 BehaviorSubjectObservable 之間的區別。

Angular 中下 BehaviorSubjectObservable 的主要區別

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

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

讓我們討論 Angular ObservableBehaviorSubject 的基本概念。

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

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

作者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Observable