Как в Angular 2 вызвать метод компонента в ng-content?

Question

[hobu4ok91]

Заголовок не совсем понятный, вот конкретный пример:
Шаблон HomeComponent:

<app-step-controls>
  <button>Назад</button>
  <button (click)="toNextStep('test')">Вперед</button>
</app-step-controls>

Шаблон AppStepControlsComponent:

<div>
  <ng-content></ng-content>
</div>

Метод toNextStep() определен в компоненте AppStepControls, но он не вызывается при клике на кнопке которая помещается в нутрь тегов компонента AppStepControlsComponent. Как можно вызвать этот метод при клике на кнопке?

Answer 1

[Руслан Лопатин]

В компонент добавить exportAs:

@Component({
  selector: 'app-step-controls',
  template:
  `
  <div>
    <ng-content></ng-content>
  </div>
  `,
  exportAs: 'appStepControls'
})
export class AppStepControlsComponent {
}

Использовать как-то так:

<app-step-controls #ascs="appStepControls">
  <button>Назад</button>
  <button (click)="ascs.toNextStep('test')">Вперед</button>
</app-step-controls>

Answer 2

[Артем Каюн]

Используйте @ViewChild чтобы получить дочерний элемент learnangular2.com/viewChild