Angular 中的 BehaviorSubject 与 Observable

Muhammad Adil 2023年1月30日 2022年4月20日
  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 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