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

Question

hobu4ok91 @hobu4ok91

Angular

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

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

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

Шаблон AppStepControlsComponent:

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

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

Вопрос задан более трёх лет назад
684 просмотра

Комментировать

Подписаться 2 Оценить Комментировать

Answer 1 · 2016-12-03 11:40:58

В компонент добавить 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>

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

Войдите на сайт