Как передать событие от глубоко вложенного потомка к родителю в Angular 2?

Question

У меня есть вложенный дочерний компонент с выходным событием. Я хочу прослушать это событие из родительского компонента, но я не знаю, как, у меня есть 4 уровня:

Я пытался передать событие от дочернего 3 кребенок 2 и ребенок 2 ребенку и родителю, но я думаю, что это не лучший способ.

-Parent (From this I want listen the event)
--Child
----Child 2
------Child 3 (This have the Event)

Answer 1

Источник Дэн Уолин (ng-conf: Освоение темы: параметры связи в RxJS), не рекомендуется использовать OutPut, когда у вас есть компонент на более глубоком уровне, который должен взаимодействовать с более высоким рычагомкомпонент, представьте, что у вас есть 5 или 6 уровней !!, вместо этого вы должны использовать Subject : вы можете создать и шину событий через наблюдаемую службу

События здесь - это список событий, если выхотите

export enum Events{
 'payment done',
  // other events here
 }

@Injectable()
export class EventService {

 private subject$ = new Subject()

 emit(event: EmitEvent) {
    this.subject$.next(event); 
  } 

 on(event: Events, action: any): Subscription {
 return this.subject$.pipe(
  filter((e: EmitEvent) => e.name == event),
  map((e: EmitEvent) => e.value)).subscribe(action);
 }

}

, так что теперь представьте, что вы хотите отправить событие из Child3 , например, после выполнения платежа => уведомить родительский компонент

export class Child3Component implements OnInit {

  constructor(public eventservice : EventService ) {}
  pay(paymentAmount: any) {
    this.eventservice.emit(
      new EmitEvent('payment done',paymentAmount));
  }
}

Теперь в вашем родительском компоненте вы можете вызвать такой метод, и вы получите событие

 export class ParentComponent implements OnInit {
   constructor(public eventservice : EventService ) {}
   ngOnInit() {
    this.eventservice.on('payment done', (paymentAmount => console.log(paymentAmount));
   }
 }

Answer 2

Хотя вы можете использовать для этого @Output генератор событий, я бы посоветовал вам создать совместно используемую службу, которая будет обрабатывать коммуникации, поскольку существует довольно много уровней вложенности.

Вы можетесделайте что-то вроде ниже и добавьте сервис в оба ваших компонента.Один будет отправлять сообщение (ваш вложенный дочерний компонент), а другой будет прослушивать сообщения (ваш компонент верхнего уровня).

Определить службу

@Injectable({
    providedIn: 'root'
})
export class CommunicationService {
    @Output() message$: EventEmitter<boolean> = new EventEmitter();

    sendMessage(message: String) {
        this.change.emit(message)
    }
}

Вставить ее в свои компоненты

constructor(private communicationService: CommunicationService) { }

В компоненте, куда вы отправите сообщение от

sendMessage() {
    this.communicationService.sendMessage('This is a message from deep below!');
}

А в компоненте слушателя подпишитесь на источник событий

ngOnInit() {
    this.communicationService.message$.subscribe(message => {
      console.log(message);
    });
}