Как связать событие с элементом родителя с помощью Angular 2

Question

Я ранее добавлял элемент кнопки внутри шаблона дочернего компонента, но из-за некоторого разделения кода мне пришлось поместить эту кнопку за пределы шаблона для ребенка (в шаблоне родителя).

Я не уверен, как связать событие click на этой кнопке, которая в конечном итоге вызовет функцию на дочернем компоненте.

Просьба предложить.

Родитель:

@Component({ 
selector: 'app', 
template: ` 
    <button>Click me to call child's showMe()</button> 
    <child></child> 
` 
}) 

Ребенок:

@Component({ 
selector: 'child', 
template: `Hi...` 
}) 

class Child { 
    public showMe() { 
     console.log("ShowMe called..."); 
    } 
    } 

Я не хочу, чтобы поместить событие код привязки в шаблоне родительского, но хочу передать ссылку кнопки для детского компонента & связывания событие внутри дочернего компонента.

Answer 1

Вы можете использовать переменную шаблона для ссылки на братьев и сестер

<button (click)="child.doSomething($event)">click me</button> 
<child #child></child>