1

Para un componente tengo que inicializar muchos servicios y suscripciones, entonces no quiero que los servicios queden a la escucha de ningún cambio entonces quiero hacer los unsuscribe en el ngAfterContentInit(), para facilitar el trabajo, lo que hago es llenar un array de subscribe y ya en ngAfterContentInit() con metodo y un forEach hago los unsuscribe.

Aca un poco de codigo para entenderlo mejor:

import { ResumeService } from './../../services/resume.service';
import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-resumen',
  templateUrl: './resumen.component.html'
})
export class ResumenComponent implements OnInit, AfterContentInit {

  private subscriptions: Subscription[] = [];
  description: any;
  stack: any[] = [];
  jobs: any[] = [];
  education: any[] = [];
  services: any[] = [];
  testimonials: any[] = [];

  constructor(private resumen: ResumeService) { }

  ngOnInit(): void {
    this.loadDescription();
    this.loadStack();
    this.loadJobs();
    this.loadEducation();
    this.loadServices();
    this.loadTestimonials();
  }

  ngAfterContentInit(): void {
    // this.unsubscribe();
  }


  loadDescription() {
    this.subscriptions.push(
      this.resumen.fetchData('description').subscribe((data) => {
        this.description = data;
      }));
  }

  loadStack() {
    this.subscriptions.push(
      this.resumen.fetchData('languajes').subscribe((data: any) => {
        this.stack = data;
      }));
  }

  loadJobs() {
    this.subscriptions.push(
      this.resumen.fetchData('jobs').subscribe((data: any) => {
        this.jobs = data;
      }));
  }


  loadEducation() {
    this.subscriptions.push(
      this.resumen.fetchData('education').subscribe((data: any) => {
        this.education = data;
      }));
  }


  loadServices() {
    this.subscriptions.push(
      this.resumen.fetchData('services').subscribe((data: any) => {
        this.services = data;
      }));
  }

  loadTestimonials() {
    this.subscriptions.push(
      this.resumen.fetchData('testimonials').subscribe((data: any) => {
        this.testimonials = data;
      }));
  }


  unsubscribe() {
    this.subscriptions.forEach((subscription: Subscription) => {
      subscription.unsubscribe();
      console.log('unsuscribing..');
    });
  }
}

Pero no se me renderiza nada en la pantalla, si a la consola si se ejecuta todo, entonces supongo que el Unsubcrite destruye la data, pero quisiera saber cual es la forma correcta de hacer esto entonces o solamente en el unsubcrite hay forma de hacelo?.

si utilizo this.unsubscribe(); en el ngOnInit despues de cargar todos los servicios pasa lo mismo entonces no se como realizar esto adecuadamente, pero en el ngOnDestroy si por obvias razones todo funciona correctamente.

2 respuestas 2

2

El problema es que no das tiempo a obtener las respuestas: Te suscribes a N observables y justo después cancelas las suscripciones. La solución es esperar a obtener las respuestas:

  loadDescription() {
    const subscription = this.resumen.fetchData('description')
      .subscribe((data) => {
        this.description = data;
        subscription.unsuscribe();
      }));
  }

  loadStack() {
    const subscription = this.resumen.fetchData('languajes')
      .subscribe((data: any) => {
        this.stack = data;
        subscription.unsuscribe();
      }));
  }

  ...

y así con todos.

NOTA IMPORTANTE: si esos Observables son generados en tu servicio por llamadas AJAX (usando HttpClient), entonces no hagas nada: las llamadas AJAX sólo pueden generar una respuesta, por lo que Angular ya se encarga de hacer llamadas a unsuscribe automáticamente.

0

Lo que podrías hacer es un merge de tus observables, después hacer un switchMap para asignar las variables y por último el unsubscribe.

Algo como lo siguiente:

  constructor(private resumen: ResumenService) { 
    this._mergeFetch();
  }

  private _mergeFetch(): void {
    merge(
      this.resumen.fetchData('description').pipe(map(this._addCase('description'))), 
      this.resumen.fetchData('languajes').pipe(map(this._addCase('languajes'))), 
    ).pipe(
      switchMap(this._switchData.bind(this))
    ).subscribe().unsubscribe();

    console.log(this.description);
    console.log(this.stack);
  }

  private _switchData(value:  {label: string, data: any}): Observable<any> {
    switch(value.label) {
      case 'description':
        this.description = value.data;
      break;
      case 'languajes':
       this.stack = value.data;
      break;
    }
    return of();
  }

  private _addCase(label: string): (data: any) => {label: string, data: any} {
    return (data: any) => {
      return {label: label, data: data}
    }
  }

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.