Skip to main content
se añadieron 207 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Yo usaría un servicio para comunicar los elementos, porque no tienen una relación directa entre sí y sobrecargar la lógica de sus respectivos padres complicaría mucho el código. Te pongo un ejemplo básico:

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

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

En tu caso, si quieres evitar un switch para ver qué tipo de mensaje es, podrías crear varios Subjects (para cada tipo de evento), y tus componentes podrían enviar/escuchar diferentes tipos de mensajes en diferentes métodos:

@Injectable()
export class MessageService {

    private subjectAccion1 = new Subject<any>();

    private subjectAccion2 = new Subject<any>();

    hazAccion1(message: string) {
        this.subjectAccion1.next({ text: message });
    }

    hazAccion2(message: string) {
        this.subjectAccion2.next({ text: message });
    }

    escucharAccion1(): Observable<any> {
        return this.subjectAccion1.asObservable();
    }

    escucharAccion2(): Observable<any> {
        return this.subjectAccion2.asObservable();
    }

    ...
   
}

Entonces el componente que espera órdenes se suscribiría al servicio:

constructor(private msgService: MessageService) { }

ngOnInit() {
  this.observer1 = msgSer.escucharAccion1().subscribe(mensaje => this.cambiarAlgo1(mensaje));
  this.observer2 = msgSer.escucharAccion2().subscribe(mensaje => this.cambiarAlgo2(mensaje));
  //...
} 

ngOnDestroy() {
  this.observer1.unsubscribe();
  this.observer2.unsubscribe();
}

¡No te olvides cancelar la subscripción o tendrás memory-leaks!

Yo usaría un servicio para comunicar los elementos, porque no tienen una relación directa entre sí y sobrecargar la lógica de sus respectivos padres complicaría mucho el código. Te pongo un ejemplo básico:

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

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

En tu caso, si quieres evitar un switch para ver qué tipo de mensaje es, podrías crear varios Subjects (para cada tipo de evento), y tus componentes podrían enviar/escuchar diferentes tipos de mensajes en diferentes métodos:

@Injectable()
export class MessageService {

    private subjectAccion1 = new Subject<any>();

    private subjectAccion2 = new Subject<any>();

    hazAccion1(message: string) {
        this.subjectAccion1.next({ text: message });
    }

    hazAccion2(message: string) {
        this.subjectAccion2.next({ text: message });
    }

    escucharAccion1(): Observable<any> {
        return this.subjectAccion1.asObservable();
    }

    escucharAccion2(): Observable<any> {
        return this.subjectAccion2.asObservable();
    }

    ...
   
}

Entonces el componente que espera órdenes se suscribiría al servicio:

constructor(private msgService: MessageService) { }

ngOnInit() {
  msgSer.escucharAccion1().subscribe(mensaje => this.cambiarAlgo1(mensaje));
  msgSer.escucharAccion2().subscribe(mensaje => this.cambiarAlgo2(mensaje));
  //...
}

Yo usaría un servicio para comunicar los elementos, porque no tienen una relación directa entre sí y sobrecargar la lógica de sus respectivos padres complicaría mucho el código. Te pongo un ejemplo básico:

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

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

En tu caso, si quieres evitar un switch para ver qué tipo de mensaje es, podrías crear varios Subjects (para cada tipo de evento), y tus componentes podrían enviar/escuchar diferentes tipos de mensajes en diferentes métodos:

@Injectable()
export class MessageService {

    private subjectAccion1 = new Subject<any>();

    private subjectAccion2 = new Subject<any>();

    hazAccion1(message: string) {
        this.subjectAccion1.next({ text: message });
    }

    hazAccion2(message: string) {
        this.subjectAccion2.next({ text: message });
    }

    escucharAccion1(): Observable<any> {
        return this.subjectAccion1.asObservable();
    }

    escucharAccion2(): Observable<any> {
        return this.subjectAccion2.asObservable();
    }

    ...
   
}

Entonces el componente que espera órdenes se suscribiría al servicio:

constructor(private msgService: MessageService) { }

ngOnInit() {
  this.observer1 = msgSer.escucharAccion1().subscribe(mensaje => this.cambiarAlgo1(mensaje));
  this.observer2 = msgSer.escucharAccion2().subscribe(mensaje => this.cambiarAlgo2(mensaje));
  //...
} 

ngOnDestroy() {
  this.observer1.unsubscribe();
  this.observer2.unsubscribe();
}

¡No te olvides cancelar la subscripción o tendrás memory-leaks!

Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Yo usaría un servicio para comunicar los elementos, porque no tienen una relación directa entre sí y sobrecargar la lógica de sus respectivos padres complicaría mucho el código. Te pongo un ejemplo básico:

@Injectable()
export class MessageService {

    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

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

En tu caso, si quieres evitar un switch para ver qué tipo de mensaje es, podrías crear varios Subjects (para cada tipo de evento), y tus componentes podrían enviar/escuchar diferentes tipos de mensajes en diferentes métodos:

@Injectable()
export class MessageService {

    private subjectAccion1 = new Subject<any>();

    private subjectAccion2 = new Subject<any>();

    hazAccion1(message: string) {
        this.subjectAccion1.next({ text: message });
    }

    hazAccion2(message: string) {
        this.subjectAccion2.next({ text: message });
    }

    escucharAccion1(): Observable<any> {
        return this.subjectAccion1.asObservable();
    }

    escucharAccion2(): Observable<any> {
        return this.subjectAccion2.asObservable();
    }

    ...
   
}

Entonces el componente que espera órdenes se suscribiría al servicio:

constructor(private msgService: MessageService) { }

ngOnInit() {
  msgSer.escucharAccion1().subscribe(mensaje => this.cambiarAlgo1(mensaje));
  msgSer.escucharAccion2().subscribe(mensaje => this.cambiarAlgo2(mensaje));
  //...
}