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

点击这里查看代码的演示。