BehaviorSubject vs. Observable dans Angular

1. Différence principale entre BehaviorSubject et Observable dans Angular
2. Qu’est-ce qui est Observable dans Angular
3. Qu’est-ce que BehaviorSubject dans Angular
4. Exemple de BehaviorSubject dans Angular

Angular BehaviorSubject est un sujet qui émet la dernière valeur émise par la source Observable. En revanche, Observable est utilisé pour émettre des valeurs dans le temps.

Angular les utilise pour gérer des événements ou des flux de données, tels que des requêtes HTTP ou des entrées utilisateur. Ils sont également généralement utilisés lorsqu’un observateur doit être informé des changements d’état de l’objet.

En détail, discutons de la différence entre BehaviorSubject et Observable.

Différence principale entre BehaviorSubject et Observable dans Angular

BehaviorSubject est Angular observable avec des fonctionnalités définies ; c’est théoriquement un sous-type de Observable ; Observable est générique. Un sujet peut être utilisé pour construire un observable à l’aide de BehaviorSubject.

La principale différence est que vous ne pouvez pas utiliser la méthode next() pour fournir des données à un observable.

Discutons des concepts de base d’Angular Observable et BehaviorSubject.

Qu’est-ce qui est Observable dans Angular

Dans une application Angular, RxJS fournit des observables ; les observables facilitent le partage de données entre auteurs et utilisateurs.

Observable est une meilleure stratégie pour la gestion des événements, l’informatique asynchrone et la gestion de plusieurs attributs.

Un aspect unique des Observables est qu’ils ne peuvent être manipulés que par un utilisateur qui s’y est abonné comme un composant n’est pas implémenté par le consommateur abonné. L’utilisateur ne peut recevoir des mises à jour que s’il s’est abonné.

Qu’est-ce que BehaviorSubject dans Angular

Généralement, le sujet est mis en œuvre de trois manières, chacune offrant des capacités différentes et pouvant être appliquée à diverses applications.

1. ReplaySubject : cet objet garde une trace de toutes les valeurs qui ont été poussées. Il distribue tous les items émis par la source à tous les observateurs qui y sont abonnés.
2. BehaviorSubject : c’est celui qui stocke la valeur actuelle. Un observateur qui s’abonne à BehaviorSubject recevra une valeur au fil du temps.
3. AsyncSubject : il enregistre la valeur la plus récente et la transmet chaque fois que la séquence est terminée.

BehaviorSubject dans Angular vous permet d’envoyer et de récupérer des valeurs vers un Observable. Le statut du contrôle d’accès, par exemple, est un BehaviorSubject qui fournit une valeur qui évolue.

Dans ce scénario, l’objectif principal du BehaviorSubject est de s’assurer que chaque utilisateur reçoit la valeur finale.

Étant donné qu’il doit toujours fournir une valeur lors de l’abonnement, même s’il n’a pas acquis la valeur suivante, le sujet de comportement nécessite une valeur de départ. Il renvoie la valeur la plus récente du sujet lors de l’abonnement.

La méthode getValue() peut être utilisée pour accéder à tout moment à la dernière valeur du sujet dans du code non observable.

De plus, un argument est fourni à la fonction BehaviorSubject Object() pour refléter l’état initial. Lorsqu’une exigence pour un état est établie et que d’autres abonnements sont effectués, BehaviorSubject fournira d’abord l’état le plus récent.

Exemple de BehaviorSubject dans Angular

Pour avoir une meilleure idée de la discussion mentionnée ci-dessus, discutons d’un exemple.

App.composant.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.composant.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 émet la dernière valeur émise par la source Observable, ce qui peut être utile si vous devez conserver une valeur à jour pendant une période spécifique.

Les observables sont utiles lorsque vous avez besoin de connaître chaque changement dans un ensemble de données, mais ne sont pas aussi efficaces que BehaviorSubject lors de la mise à jour des données avec de nouvelles valeurs.

Cliquez ici pour vérifier la démonstration en direct du code.