我有一个名为CardComponent
的组件,带有以下标记
<div class="header">
<!-- My card style header -->
</div>
<div class="content">
<ng-content></ng-content>
<div>
<div class="footer">
<!-- My card style footer -->
<!-- Need a button here (explained below) -->
</div>
我正在使用以下
<card>
<component-a></component-a>
</card>
<card>
<component-b></component-b>
</card>
工作正常。但是,我需要在卡页脚中添加一个按钮,该按钮将调用相应子组件的方法。
例如,第一张卡片上的按钮会调用component-a
中的某个功能,component-b
中的第二个功能。
我可以在主/容器组件中没有管道的情况下执行此操作吗?而且无需进行<component-a #var>
。
答案 0 :(得分:4)
您可以在父组件中使用@ViewChild
来执行此操作:
@ViewChild(ComponentA) theComponent: ComponentA;
其中ComponentA是组件名称的引用。
然后您可以在此字段中使用子组件方法
theComponent.method()
正如@Günter所建议的那样:
“如果传递给<ng-content>
,您需要使用@ContentChild()
而不是@ViewChild()
。@ViewChild()
只查找模板中的元素。您还应该提到该组件获胜在调用ngAfterContentInit()
之前设置。“
答案 1 :(得分:1)
您可以在点击按钮时发出事件的EventEmitter
添加doSomething
(CardComponent
),然后
<card (doSomething)="componenta.aFunction()">
<component-a #componenta></component-a>
</card>
<card (doSomething)="componentb.aFunction()">
<component-b #componentb></component-b>
</card>