Как прикрепить обработчик кликов к проецируемому элементу контента

Question

Я использую проекцию контента, чтобы поместить кнопку в компонент.

<hello name="{{ name }}">
  <button #btn>Click Me</button>
</hello>

И компонент:

@Component({
  selector: 'hello',
  template: `
  <h3>Hello {{name}}!</h3>
  <ng-content></ng-content>
  `
})

Пока все хорошо ... но теперь я хочу добавить прослушиватель событий (щелчка) к этой кнопке, и я хочу, чтобы обработчик жил в компоненте, который получает проецируемое содержимое.

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

@ViewChild('btn') btn

К сожалению, когда я консоль войти this.btn в ngAfterViewInit, я получаю "неопределенный". И даже если это сработало, я полагаю, что должен быть более угловой способ присоединить слушателя, чем доступ к нативному элементу.

Какой лучший способ сделать это?

Пример стекаблица: https://stackblitz.com/edit/angular-cj4bz1?file=src%2Fapp%2Fhello.component.ts

Answer 1

Вы можете использовать @ContentChild или @ContentChildren, что дает вам доступ к проецируемым дочерним элементам внутри вашего компонента:

Подробнее об этом можно прочитать здесь, а также о сходствах и различиях с @ViewChild и @ViewChildren Содержимое дочерних документов

После того, как вы получите доступ к вашему Child / Children, вы можете использовать что-то вроде rxjs и оператора From Event для удержания события click.

fromEvent(this.mycontentchildelement, 'click').subscribe((event) => console.log('got clicked', event));

Надеюсь, это поможет