2

Desde mi componente.ts llamo a un servicio y me suscribo para ver la data que trae, mi pregunta es: Tengo que desuscribirme desde el componente.ts? ya que tengo entendido que el httpClient (del servicio) hace la desuscripcion del observable automaticamente. Desde el componente hice la desuscripcion utilizando takeUntil de rxjs pero por ahi no hace falta.

Aca mi servicio

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
 
 export class MyApiService {

  private unsubscribe$ = new Subject<void>();
  constructor(private http: HttpClient) { }

  getTravels(): Observable<any>{
    return this.http.get<Travel[]>(this.URI + 'travel');
  }

}

Aca el componente.ts donde llamo al servicio

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MyApiService } from './../services/http/my-api.service';

constructor(
    public myApiService: MyApiService
  ) {}

  ngOnInit(): void {
    this.getTravels();
  }
  
  getTravels() {
    this.myApiService
      .getTravels()
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((res) => {
        this.travels = res;
      });
  }
  
  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

1
  • 1
    No es necesario. Angular destruye la suscripción cuando esta finaliza con complete, pero esto no aplica siempre. Puede que los datos aun no lleguen cuando el usuario abandona tu componente, de manera que seguirá pendiente la resolución del observable. Aunque no es un comportamiento común, puede pasar y la suscripción continuara activa hasta que se resuelva.
    – Legna
    el 28 sep. 2021 a las 13:35

1 respuesta 1

2

Cuando el observable es de un solo uso, una buena práctica usar el pipe take:

source.pipe(take(1));

De esta forma, al terminar, se cierra la suscripción automáticamente.

Si los datos solo los vamos a mostrar en el html, una buena práctica es usar el pipe async.

<span>{{source | async }}</span>

De esta forma, cuando se deje de mostrar ese HTML, Angular cerrará la suscripción automáticamente y además será más optimo repintando.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.