Cómo terminar las suscripciones a los observables en angular

Como sabemos, en Angular se usan mucho los observables, dada su utilidad y versatilidad, aunque hemos de admitir que no es una tarea sencilla de aprender inicialmente.

Tener una aplicación con un alto consumo de memoria es uno de los peores problemas que se puede tener. Es difícil de encontrar, difícil de depurar y, a menudo, difícil de resolver.     Desafortunadamente, este problema ocurre en todos los lenguajes de programación incluyendo Angular. Los observables son impresionantes, debido al incesante flujo de datos, pero este beneficio puede causar serios problemas con un alto consumo de  memoria. Hoy vamos a ver como evitar esto usando un paquete NPM llamado @w11k/ngx-componentdestroyed .

Este paquete NPM se encarga por nosotros de terminar las suscripciones a los observables, veamos un ejemplo:

primero creamos una nueva aplicación :

 ng new observable-app 

Luego instalamos el paquete NPM

 npm i --save @w11k/ngx-componentdestroyed 

Algo que tenemos que tener presente al usar este paquete NPM, es que nuestro componente debe terner el método ngOnDestroy(){} el cual puede estar vacio. Procedemos a abrir nuestra aplicación con nuestro editor favorito y creamos dos componentes:

 ng g c primero 
 ng g c segundo 

Luego en el app.component.html creamos lo siguiente:

 


<div>
  
<ul>
    
<li><a [routerLink]="['/primero']">Primero</a></li>

    
<li><a [routerLink]="['/segundo']">Segundo</a></li>

  </ul>

</div>


<router-outlet></router-outlet>

En el componente primero vamos a crear un observable en el método ngOninit(), quedando de esta manera el código de éste componente:

 
import { Component , OnDestroy, OnInit} from '@angular/core';
import {interval, Observable} from 'rxjs';
import {untilComponentDestroyed} from '@w11k/ngx-componentdestroyed';
@Component({
  selector: 'app-primero',
  templateUrl: './primero.component.html',
  styleUrls: ['./primero.component.css']
})
export class PrimeroComponent implements OnInit , OnDestroy{

  constructor() { }

  ngOnDestroy() {

  }
  ngOnInit() {
    interval(1000)
       .subscribe(() => {
        console.log('observable')
      });
  }

}

Si ejecutamos la aplicación en este punto, vemos como el observable del componente primero sigue en ejecución inclusive cuando cambiamos a componente segundo. Ahora bien, esto se debe a que no hemos cerrado la suscripción a dicho observable. Agreguemos la magia,

 
ngOnInit() {
    interval(1000)
      .pipe( untilComponentDestroyed(this)) // <= terminar la subscripción al observable .subscribe(() => {
        console.log('observable')
      });
  } 

ahora si volvemos a ejecutar nuestra aplicación veremos que al cambiar de ruta del componente primero al segundo el observable que se encuentra en el primer componente deja de ejecutarse.

Con esto terminamos este post, espero que  sea de gran ayuda y lo puedas implementar en tus aplicaciones angular. puedes descargar el código fuente desde aquí.

Hasta la próxima!

Leave a reply:

Your email address will not be published.

Site Footer