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的答案是正确的方法，但是如果您想避免使用共享服务，则可以这样做

view.html

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

view.ts

actionHandler(event){
  //doSomething
}

componentA.html

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

componentA.ts

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

constructor() {
}

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

componentB.html

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

componentB.ts

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

constructor() {
}

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

通过Angular2

3 个答案: