Angular 2 : call child component method

Question

我有一个名为 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> .

Answer 1

您可以使用@ViewChild来做到这一点在你的父组件中:

@ViewChild(ComponentA) theComponent: ComponentA;

其中 ComponentA 是组件名称的引用。

然后您可以使用此字段的子组件方法，

theComponent.method()

根据@Günter的建议:

“如果它传递给<ng-content>，您需要使用@ContentChild()而不是@ViewChild()。@ViewChild()仅查找模板中的元素。您还应该提到，theComponent不会在ngAfterContentInit()之前设置。被调用。”