嵌套组件之间的事件绑定

问题描述

假设我有两个组件compA和cmpB 和cmpB用作cmpA的子级（如选择和选项）

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

我如何使用（ng-template和let-attr指令和ngTemplateOutlet）将cmpB的click事件传递给它的父级，但我没有尝试过 reusable component in angular

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

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

<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>

我希望所有这些都在“幕后”

解决方法

这个想法是cmpA和cmpB应该彼此了解。在cmpB中，您可以注入cmpA，然后直接调用其方法。而相反，cmpA可以通过@ContentChildren装饰器获取所有子cmpB项目，并直接对其进行处理（例如更新其“已检查”状态）。

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