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!