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

可以使用

Output（）

decorator从子组件发出事件，以便父组件可以捕获它。我需要的是捕获任何子组件发出的事件，它不一定是给定组件的直接子组件

让

ComponentTwo

成为发出事件的组件。如果应用程序具有以下结构：

app->ComponentTwo

，那么我们可以轻松捕获由

ComponentTwo

发出的事件。但是如果我们考虑结构如<代码> APP>组件-1 >组件2 < /代码>，那么我们就不能直接捕获发射器。

下面是一个例子来说明这个问题

---

那么，是否有一种方法可以将事件传播到所有父组件？谢谢。

这类活动不支持冒泡。您需要手动捕捉它们并向父级发射

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

通过这种方式，所有组件都可以订阅它，以便收到事件通知，即使在子级中也是如此

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

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

constructor(private service: SharedService) {
}

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

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

---

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

view.html

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

componentA.html

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

组件A.ts

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

constructor() {
}

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

@Output（）actionA:EventEmitter=neweventemitter（）；
构造函数（）{
}
汉德勒行动（活动）{
this.actionA.emit（事件）；
}

componentB.html

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

点击我

组件B.ts

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

constructor() {
}

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

@Output（）actionB:EventEmitter=neweventemitter（）；
构造函数（）{
}
actionHandlerB（o:objectModel）{
this.actionB.emit（新对象模型（o））；
}

如果您发现必须传递某些事件，请确保一致性并提出命名策略。例如，我喜欢在方法名的开头添加

raise

，如果该方法所做的唯一事情就是重新引发事件

例如

在

ts

文件中：

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

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

@Output（'paypalTokenized'）
public paypalTokenizedEmitter=new EventEmitter（）；
//贝宝标记化
公共RaisePayPaltTokenized（有效负载：PayPalTokenizedPayload）
{
//这里没有其他逻辑！
this.paypalTokenizedEmitter.emit（有效载荷）；
}

---

这意味着我可以立即告诉您，事件正在进行中，无需采取进一步行动。

谢谢。顺便说一句，由于A2的设计或只是没有实施（尚未实施），没有气泡？直接链接已更改。现在是：。或者，您可以直接发出事件：（paypalTokenized）=“paypalTokenizedEmitter.emit（$event）”

(paypalTokenized)="raisePaypalTokenized($event)"

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

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