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.