1

Desde un componente hijo realizo varias acciones sobre una tabla (agregar, editar, duplicar y eliminar). Todo lo que se agrega, edita o elimina, se guarda en un array el cual debe ser enviado al componente padre.

Actualmente, por cada acción que se realiza, hago el emit del array, es decir que tengo 4 funciones (1 para cada acción) y hago el emit en cada una de ellas.

Probé usando un DoCheck con un if sobre el array pero se llama 3 veces cada vez que se inserta, edita o elimina un objeto al array, funcione pero no es óptimo ya que se haría el emit varias veces innecesariamente.

Quisiera saber si esto es correcto o hay alguna manera más efectiva de realizar lo mismo sin necesidad de llamar el emit cada vez que se produce una acción.

Componente hijo:

@Output() oProcedimientos = new EventEmitter<Procedimiento[]>();

addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this.oProcedimientos.emit(this.arrayProcedimientos);
}


editar(i: number) {
   const p: Procedimiento = this.arrayProcedimientos[i];
   this.procedimientoSeleccionado = p.procedimiento;
   this.ambitoSeleccionado = p.ambito;
   this.formProcedimientos.patchValue({
      descripcion: this.procedimientoSeleccionado.descripcion,
      ambito: this.ambitoSeleccionado,
 });
 this.oProcedimientos.emit(this.arrayProcedimientos);
}

duplicar(i: number) {
   const clonedProc: Procedimiento = Object.create(this.arrayProcedimientos[i]);
   this.arrayProcedimientos.push(clonedProc);
   this.oProcedimientos.emit(this.arrayProcedimientos);
} 

eliminar(i: number) {
   this.arrayProcedimientos.splice(i, 1);
   this.oProcedimientos.emit(this.arrayProcedimientos);
}

Componente padre: HTML:

<app-procedimientos (oProcedimientos)="getProcedimientos($event)"></app-procedimientos>

TS

procReceived: Procedimiento[];

getProcedimientos(procedimiento) {
   this.procReceived = procedimiento;
}

3 respuestas 3

2

Tu implementación es correcta, cabe aclarar que el EventEmitter solo se ejecuta una vez por cada emit que mandes llamar, así que se esta ejecutando mas de una vez por otra razón que no puedo deducir por el código que compartes. Te comparto otra solución que puedes implementar, se trata de un servicio que se comparte entre los componentes y al cual te puedes suscribir para actualizar la información que necesitas.

//procedure-event.service.ts
import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class ProcedureEventService<T> {
  private _subject = new BehaviorSubject<T>(null);

  get subject(): Observable<any> {
    return this._subject.asObservable();
  }

  emitEvent(event: T) {
    this._subject.next(event);
  }
}

Inyectas el servicio en ambos componentes padre-hijo.

/**Componente padre**/
subjectSubscriber: Subscription;
        
constructor(private _procedureEventService: ProcedureEventService<Procedimiento[]>) {
    this.subjectSubscriber = this._procedureEventService.subject.subscribe(
        (event: Procedimiento[]) => {
            this.procReceived = event;
        }
    );
}
        
ngOnDestroy() {
    this.subjectSubscriber.unsubscribe();
}
/**Componente Hijo**/
constructor(private _procedureEventService: ProcedureEventService<Procedimiento[]>) {}
       
addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this._procedureEventService.emitEvent(this.arrayProcedimientos);
}

EDIT

Para múltiples eventos en un mismo servicio es necesario crear un Map para registrar distintos BehaviorSubject. El servicio quedaría modificado de la siguiente manera.

import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable, of } from "rxjs";

@Injectable({ providedIn: "root" })
export class EventService {
  private _subjects: Map<string, BehaviorSubject<any>> = new Map();

  getSubject<K>(key: string): Observable<K> {
    this._validateSubject(key);
    return this._subjects.get(key).asObservable();
  }

  emitEvent<K>(key: string, event: K) {
    this._validateSubject(key);
    this._subjects.get(key).next(event);
  }

  private _validateSubject(key: string) {
    if (!this._subjects.has(key)) {
      this._subjects.set(key, new BehaviorSubject(null));
    }
  }
}

Ahora podrás registrar distintos subjects con el mismo servicio utilizando una Llave (key) para diferenciarlos. En la solución anterior la modificación se vería afectada de la siguiente manera:

/**Componente padre**/
subjectSubscriber: Subscription;
key: string = "[Procedimientos]";
        
constructor(private _eventService: EventService) {
    this.subjectSubscriber = this._eventService.getSubject<Procedimiento[]>(key).subscribe(
        (event: Procedimiento[]) => {
            this.procReceived = event;
        }
    );
}
        
ngOnDestroy() {
    this.subjectSubscriber.unsubscribe();
}

/**Componente Hijo**/
key: string = "[Procedimientos]";
constructor(private _eventService: EventService) {}
       
addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this._eventService.emitEvent(key, this.arrayProcedimientos);
}

NOTA: La llave puede ser la que tu quieras, solo debe ser la misma para el componente que se suscribe y el componente que emite, pero debe ser diferente para registrar otro BehaviorSubject.

8
  • Te hago una consulta, en el componente padre creo que hay un error con los nombres de las variables. this.procReceived = procedimiento; verdad?
    – GAL
    Commented el 30 dic. 2020 a las 17:35
  • 1
    @GAL Tienes toda la razón, sería this.procReceived = event;, gracias. Commented el 30 dic. 2020 a las 18:52
  • Estuve probando el servicio y hace bien los emites, pero es como si nunca hiciera el unsubscribe en el ngOnDestroy. Hice un console.log en a this._subject y va acumulando todos los datos de los emits que hizo anteriormente y eso me está dando problemas. Falta algo más además del unsubscribe ?
    – GAL
    Commented el 6 ene. 2021 a las 15:20
  • @GAL debería hacerlo, recuerda nada mas ejecutar el subscribe una sola vez, ya sea en el constructor o en el ngOnInit. También verifica que tengas la interfaz OnDestroy implementada en tu clase. Commented el 6 ene. 2021 a las 17:27
  • 1
    @GAL tienes razón, he modificado el servicio. Commented el 7 ene. 2021 a las 15:30
0

Este es el código que tengo en el componente padre y recibo bien los datos del componente hijo pero siempre queda activo el servicio. Nunca se desubscribe porque si yo hago un console.log(event) me muestra todo lo que se va guardando de otras llamadas de otros componentes, nunca se limpia la variable. Estoy usando Angular 8.

Básicamente en este ejemplo, muestra un alert del mensaje de error que recibo, tengo que hacer la validación con el if y preguntar si es de tipo string, sino cada vez que uso el servicio en otros componentes que no tienen nada que ver con este, se muestra el alert. En todos tengo puesto el unsubscribe() en el ngOnDestroy.

subjectSubscriber: Subscription;

constructor(private service: HttpService,
          private eventService: ProcedureEventService<string>) {
this.subjectSubscriber = this.eventService.subject.subscribe(
  (event: string) => {
    if (!(!this.subjectSubscriber)) {
     if (!this.subjectSubscriber.closed && typeof(event) === 'string' ) {
       this.showAlertError(event);
     }
    }
  },
 );
}

  ngOnDestroy() {
    this.subjectSubscriber.unsubscribe();
  }
1
  • Esto se debe a que el servicio es Singleton, es decir se crea una instancia en toda la aplicación, asi que estarás usando el mismo objeto subject, para todos los componentes que implementen ProcedureEventService, por eso se invoca múltiples veces. Lo que necesitas es registrar un nuevo Subject, es decir un Subject por cada Padre-Hijo. Edite mi respuesta para que pueda añadir esa nueva implementación. Commented el 6 ene. 2021 a las 19:18
0

Ahora el código me quedó de la siguiente manera: Componente hijo

key: string = '[Procedimientos]';

constructor(private httpService: HttpService,
          private _procedureEventService: ProcedureEventService<Procedimiento[]>) {}
addProc() {
   ...
   this.arrayProcedimientos.push(procedimiento);
   this.isHidden = true;
   this._procedureEventService.emitEvent(this.key, this.arrayProcedimientos);
}

Componente Padre

key: string = '[Procedimientos]';

constructor(private httpService: HttpService,
          private _procedureEventService: ProcedureEventService<Procedimiento[]>) {
  this.subjectSubscriber = this._procedureEventService.getSubject<Procedimiento[]> 
     (this.key).subscribe(
       (event: Procedimiento[]) => {
       this.procReceived = event;
     },
    );
 }

Arroja el siguiente error:

ERROR TypeError: Cannot read property 'asObservable' of undefined at ProcedureEventService.getSubject (procedure-event.service.ts:)

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.