嵌套组件之间的事件绑定

Question

假设我有两个组件compA和cmpB和cmpB用作cmpA的子级(如select和option(

<div>
<cmpA>
<cmpB></cmpB>
<cmpB></cmpB>
<cmpB></cmpB>
</cmpA>
</div>

如何使用(ng-template和let attr指令以及ngTemplateOutlet(将click事件从cmpB传递到其父级我尝试了它，但它不起作用角度中的可重复使用组件

因为我有另一个解决方案，但我不会使用它，因为它不实用

我提到它只是为了理解我的意思

<div>
<cmpA #cmpA1>
<cmpB (click)="cmp1.fn()"></cmpB>
<cmpB (click)="cmp1.fn()"></cmpB>
<cmpB (click)="cmp1.fn()"></cmpB>
</cmpA>
</div>
<div>
<cmpA #cmpA2>
<cmpB (click)="cmp2.fn()"></cmpB>
<cmpB (click)="cmp2.fn()"></cmpB>
<cmpB (click)="cmp2.fn()"></cmpB>
</cmpA>
</div>

我希望所有这些都是"；在引擎盖下"；

Answer 1

cmpA和cmpB应该相互了解。在cmpB中，可以注入cmpA，然后直接调用其方法。反之，cmpA可以通过@ContentChildren装饰器获取所有子cmpB项，并直接对它们进行smth(例如，更新它们的"已检查"状态(。

Angular Material是一个很好的学习来源。例如，您可以查看MatRadioGroup如何与其嵌套的MatRadioButton交互：https://github.com/angular/components/blob/master/src/material/radio/radio.ts#L487