如何解决嵌套组件之间的事件绑定
假设我有两个组件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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。