如何将事件从深层嵌套 child 传递到 Angular 2 中的 parent？

Question

我有一个嵌套的 child 组件，它有一个输出事件，我想从 parent 组件监听这个事件，但我不知道如何，我有 4 个级别：

我试图将事件从 child 3 传递到 child 2 并将 child 2 传递到 child 和 Parent，但我认为这不是最好的方法。

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

Answer 1

尽管您可以使用 @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);
    });
}

Answer 2

来源Dan Wahlin（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));
   }
 }

如何将事件从深层嵌套 child 传递到 Angular 2 中的 parent？

How pass a event from deep nested child to parent in Angular 2?

events

components

parent-child

angular