BehaviorSubject vs. Observable in Angular

1. Hauptunterschied zwischen BehaviorSubject und Observable in Angular
2. Was ist Observable in Angular
3. Was ist BehaviorSubject in Angular
4. Beispiel für BehaviorSubject in Angular

Angular BehaviorSubject ist ein Subjekt, das den letzten von der Quelle Observable ausgegebenen Wert ausgibt. Im Gegensatz dazu wird observable verwendet, um Werte über die Zeit auszugeben.

Angular verwendet sie, um Ereignisse oder Datenströme wie HTTP-Anforderungen oder Benutzereingaben zu verarbeiten. Sie werden normalerweise auch verwendet, wenn ein Beobachter über Zustandsänderungen des Objekts benachrichtigt werden muss.

Lassen Sie uns im Detail auf den Unterschied zwischen BehaviorSubject und Observable eingehen.

Hauptunterschied zwischen BehaviorSubject und Observable in Angular

BehaviorSubject ist Angular observable mit definierten Merkmalen; es ist theoretisch ein Untertyp von Observable; Observable ist generisch. Ein Subjekt kann verwendet werden, um mit Hilfe von BehaviorSubject ein Observable zu konstruieren.

Der Hauptunterschied besteht darin, dass Sie die Methode next() nicht verwenden können, um Daten an ein Observable zu liefern.

Lassen Sie uns die Grundkonzepte von Angular Observable und BehaviorSubject besprechen.

Was ist Observable in Angular

In einer Angular-Anwendung stellt RxJS Observables bereit; Observables erleichtern den Datenaustausch zwischen Autoren und Benutzern.

Observable ist eine bessere Strategie für Ereignisverwaltung, asynchrones Rechnen und Verwalten mehrerer Attribute.

Ein einzigartiger Aspekt von Observables ist, dass sie nur von einem Benutzer gehandhabt werden können, der sie abonniert hat, so wie eine Komponente nicht vom abonnierten Verbraucher implementiert wird. Der Benutzer kann nur Updates erhalten, bis er sich angemeldet hat.

Was ist BehaviorSubject in Angular

Im Allgemeinen wird das Thema auf drei Arten implementiert, von denen jede unterschiedliche Fähigkeiten bereitstellt und für verschiedene Anwendungen angewendet werden kann.

1. ReplaySubject: Dieses Objekt verfolgt alle Werte, die gepusht wurden. Es verteilt alle von der Quelle ausgegebenen Elemente an alle Beobachter, die es abonniert haben.
2. BehaviorSubject: Es ist derjenige, der den aktuellen Wert speichert. Ein Beobachter, der BehaviorSubject abonniert, erhält dabei einen Wert über die Zeit.
3. AsyncSubject: Es speichert den letzten Wert und sendet ihn, wenn die Sequenz beendet ist.

BehaviorSubject in Angular ermöglicht es Ihnen, Werte an ein Observable zu senden und abzurufen. Der Zugriffssteuerungsstatus ist beispielsweise ein BehaviorSubject, das einen Wert bereitstellt, der sich entwickelt.

In diesem Szenario ist das primäre Ziel des BehaviorSubject sicherzustellen, dass jeder Benutzer den endgültigen Wert erhält.

Da es beim Abonnement immer einen Wert bereitstellen muss, auch wenn es den nächsten Wert noch nicht erworben hat, erfordert das Verhaltensthema einen Startwert. Es gibt den aktuellsten Wert des Subjekts bei der Subskription zurück.

Mit der Methode getValue() kann jederzeit auf den letzten Wert des Subjekts in nicht beobachtbarem Code zugegriffen werden.

Außerdem wird der BehaviorSubject-Funktion Object() ein Argument übergeben, um den Anfangszustand wiederzugeben. Wenn eine Anforderung für einen Status festgelegt wird und weitere Abonnements getätigt werden, liefert BehaviorSubject zuerst den aktuellsten Status.

Beispiel für BehaviorSubject in Angular

Um eine bessere Vorstellung von der oben erwähnten Diskussion zu bekommen, lassen Sie uns ein Beispiel diskutieren.

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 gibt den letzten von der Quelle Observable ausgegebenen Wert aus, was hilfreich sein kann, wenn Sie einen aktuellen Wert für einen bestimmten Zeitraum halten müssen.

Observables sind hilfreich, wenn Sie jede Änderung in einem Datensatz kennen müssen, aber nicht so effizient wie BehaviorSubject, wenn Sie Daten mit neuen Werten aktualisieren.

Klicken Sie hier, um die Live-Demonstration des Codes zu überprüfen.