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