通过 Angular2 中的嵌套组件发出事件

Question

可以使用Output()装饰器从子组件发出事件，以便父组件可以捕获它。 我需要的是捕获任何子组件发出的事件，它不一定是给定组件的直接子组件。

让ComponentTwo成为发出事件的组件。 如果应用程序具有以下结构： App -> ComponentTwo ，那么我们可以轻松捕获ComponentTwo发出的事件。 但是如果我们考虑像App -> ComponentOne -> ComponentTwo这样的结构，那么我们就不能直接捕获发射器。

这是一个说明问题的plunker 。

那么有没有办法将事件传播到所有父组件？ 谢谢。

Answer 1

对于此类事件，不支持冒泡。 您需要手动捕获它们并发送给父级。

另一种方法是为这个组件树利用共享服务并在其中使用可观察的/主题。

这样所有组件都可以订阅它，即使在子子子节点中也能收到事件通知。

constructor(private service: SharedService) {
  this.service.notifier$.subscribe(
    data => {
      (...)
    });
}

该事件将通过以下方式触发：

constructor(private service: SharedService) {
}

notify() {
  this.service.notifier$.next('some data');
}

有关更多详细信息，请参阅此链接：

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

如果您发现必须通过某些事件，请确保保持一致并提出命名策略。 例如，如果该方法所做的唯一事情是重新引发事件，我喜欢将raise添加到方法名称的开头。

例如。

(paypalTokenized)="raisePaypalTokenized($event)"

并在ts文件中：

@Output('paypalTokenized')
public paypalTokenizedEmitter = new EventEmitter<PayPalTokenizedPayload>();

// PayPal tokenized
public raisePaypalTokenized(payload: PayPalTokenizedPayload)
{
    // no other logic here!
    this.paypalTokenizedEmitter.emit(payload);
}

这意味着我可以立即判断事件正在通过而无需采取进一步行动。

Answer 3

thierry 的答案是正确的方法，但如果你想避免使用共享服务，你可以做这样的事情

视图.html

<componentA
   (actionA)=actionHandler($event)
>
</componentA>

视图.ts

actionHandler(event){
  //doSomething
}

组件A.html

<componentB
   (actionB)=actionHandlerA($event)
>
</componentB>

组件A.ts

@Output() actionA: EventEmitter<{}> = new EventEmitter();

constructor() {
}

actionHandlerA(event){
  this.actionA.emit(event);
}

组件B.html

<a (click)="actionHandlerB(...)" >click me</a>

组件

@Output() actionB: EventEmitter<{}> = new EventEmitter();

constructor() {
}

actionHandlerB(o: objectModel){
  this.actionB.emit(new objectModel(o));
}