¿Cómo emitir un evento de nietos a abuelos en angular moderno?

Si encuentras algo que no comprendes nos puedes dejar un comentario y te ayudaremos rápidamente.

Solución:

Podría haber 2 formas:

1. Utilizando @output:

Abuelo

...
grandmaHandleClick(event) 
  console.log('grandma knows you clicked')

Padre:

@Output() notifyGrandParent= new EventEmitter();
childEvent(event) 
  this.notifyGrandParent.emit('event')

Niño se implementa correctamente en el código, por lo que está listo para comenzar.

2. Utilizando BehaviorSubject a través de Service: Con este nivel de anidamiento, en realidad puede crear algún servicio como EventServicey luego crear BehaviorSubject los cuales pueden ser suscritos directamente por el Abuelo. Además, para hacer esto service más específico del componente, puede mantener este servicio en un module el cual tendrá otros 3 componentes (Abuelo, Padre e Hijo)

export class EventService

 private childClickedEvent = new BehaviorSubject('');

  emitChildEvent(msg: string)
     this.childClickedEvent.next(msg)
  

  childEventListner()
     return this.childClickedEvent.asObservable();
    

y luego en components:

ChildComponent

export class ChildComponent
   constructor(private evtSvc: EventService)

   onClick()
     this.evtSvc.emitChildEvent('clicked a button')
   

Abuelo

export class GrandComponent
   constructor(private evtSvc: EventService)

   ngOnInit()
     this.evtSvc.childEventListner().subscribe(info =>
         console.log(info); // here you get the message from Child component
      )
   

Tenga en cuenta que, con @output evento, crea un acoplamiento estrecho de componentes y, por lo tanto, una fuerte dependencia (padre-hijo-nieto) es creado. Si el componente no es reutilizable y solo se creó para cumplir este propósito, entonces @output también tendrá sentido porque transmitirá el mensaje a cualquier nuevo desarrollador de que tienen una relación padre-hijo.

La creación de un servicio para pasar datos también expone los datos a otros componentes que pueden inyectar service en constructor.

Asi que, la decisión debe tomarse en consecuencia.

Use rxjs/sujeto, puede ser observador y observable al mismo tiempo

Uso:

1.Crear propiedad en cuestión en el servicio:

import  Subject  from 'rxjs';

export class AuthService 
   loginAccures: Subject = new Subject();

2.Cuando ocurrió el evento en la página secundaria/uso del componente:

logout()
  this.authService.loginAccures.next(false);

3. Y suscríbase al tema en la página principal/componente:

constructor(private authService: AuthService) 
    this.authService.loginAccures.subscribe((isLoggedIn: boolean) => this.isLoggedIn = isLoggedIn;)

Más adelante puedes encontrar las observaciones de otros administradores, tú incluso eres capaz mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador