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()只查找模板中的元素。您还应该提到该组件获胜在调用ngAfterContentInit()之前设置。“

Answer 2

您可以在点击按钮时发出事件的EventEmitter添加doSomething（CardComponent），然后

<card (doSomething)="componenta.aFunction()">
    <component-a #componenta></component-a>
</card>

<card (doSomething)="componentb.aFunction()">
    <component-b #componentb></component-b>
</card>

Angular2：调用子组件方法

2 个答案: