Angular2: метод компонент вызова ребенок

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

Как было предложено @ Гюнтера:.

«Если он передается <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>