Angular 中的 BehaviorSubject 與 Observable
-
Angular 中下
BehaviorSubject
和Observable
的主要區別 -
Angular 中的
Observable
-
Angular 中的
BehaviorSubject
是什麼 -
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
是什麼
通常,該主題以三種方式實現,每種方式提供不同的能力並且可以應用於各種應用。
ReplaySubject
:此物件跟蹤所有已推送的值。它將源發出的所有專案分發給所有訂閱它的觀察者。BehaviorSubject
:它是儲存當前值的那個。訂閱BehaviorSubject
的觀察者將隨著時間的推移收到一個值。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 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