BehaviorSubject vs. Observable en Angular

1. Diferencia principal entre BehaviorSubject y Observable en Angular
2. ¿Qué es Observable en Angular?
3. ¿Qué es BehaviorSubject en Angular?
4. Ejemplo de BehaviorSubject en Angular

Angular BehaviorSubject es un sujeto que emite el último valor emitido por la fuente Observable. En cambio, observable se utiliza para emitir valores a lo largo del tiempo.

Angular los usa para manejar eventos o flujos de datos, como solicitudes HTTP o entradas de usuarios. También se utilizan normalmente cuando un observador necesita ser notificado de los cambios de estado del objeto.

En detalle, analicemos la diferencia entre BehaviorSubject y Observable.

Diferencia principal entre BehaviorSubject y Observable en Angular

BehaviorSubject es observable angular con características definidas; es teóricamente un subtipo de Observable; Observable es genérico. Un sujeto puede usarse para construir un observable con la ayuda de BehaviorSubject.

La principal diferencia es que no puedes usar el método next() para enviar datos a un observable.

Discutamos los conceptos básicos de Angular Observable y BehaviorSubject.

¿Qué es Observable en Angular?

En una aplicación Angular, RxJS proporciona observables; Los observables facilitan el intercambio de datos entre autores y usuarios.

Observable es una mejor estrategia para la gestión de eventos, la computación asíncrona y la gestión de múltiples atributos.

Un aspecto único de los Observables es que solo pueden ser manejados por un usuario que se haya suscrito a ellos como un componente no implementado por el consumidor suscrito. El usuario solo puede recibir actualizaciones hasta que se haya suscrito.

¿Qué es BehaviorSubject en Angular?

Generalmente, el tema se implementa de tres maneras, cada una de las cuales brinda diferentes capacidades y se puede aplicar para varias aplicaciones.

1. ReplaySubject: este objeto realiza un seguimiento de todos los valores que se han enviado. Distribuye todos los elementos emitidos por la fuente a todos los observadores que se han suscrito a ella.
2. BehaviorSubject: Es el que almacena el valor actual. Un observador que se suscriba a BehaviorSubject recibirá un valor con el tiempo a medida que lo haga.
3. AsyncSubject: Guarda el valor más reciente y lo transmite cada vez que finaliza la secuencia.

BehaviorSubject en Angular le permite enviar y recuperar valores a un Observable. El estado de control de acceso, por ejemplo, es un BehaviorSubject que proporciona un valor que evoluciona.

En este escenario, el objetivo principal de BehaviorSubject es garantizar que cada usuario reciba el valor final.

Debido a que siempre debe proporcionar un valor de suscripción, incluso si no ha adquirido el siguiente valor, el tema de comportamiento requiere un valor inicial. Devuelve el valor más reciente del sujeto al momento de la suscripción.

El método getValue() se puede utilizar para acceder al último valor del sujeto en código no observable en cualquier momento.

Además, se proporciona un argumento a la función BehaviorSubject Object() para reflejar el estado inicial. Cuando se establece un requisito para un estado y se realizan más suscripciones, BehaviorSubject proporcionará primero el estado más actual.

Ejemplo de BehaviorSubject en Angular

Para tener una mejor idea de la discusión mencionada anteriormente, analicemos un ejemplo.

Aplicación.componente.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);
  }
}

Aplicación.componente.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 emite el último valor emitido por la fuente Observable, lo que puede ser útil si necesita mantener un valor actualizado durante un período de tiempo específico.

Los observables son útiles cuando necesita saber cada cambio en un conjunto de datos, pero no son tan eficientes como BehaviorSubject al actualizar los datos con nuevos valores.

Haga clic aquí para ver la demostración en vivo del código.