如何将点击处理程序附加到投影的内容元素答案

【问题标题】：How to attach click handler to projected content element如何将点击处理程序附加到投影的内容元素
【发布时间】：2018-08-28 20:48:41
【问题描述】：

我正在使用内容投影将按钮放入组件中。

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

还有组件：

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

到目前为止一切顺利...但我现在想向该按钮添加一个（单击）事件侦听器，并且我希望处理程序存在于接收投影内容的组件中。

我希望执行以下操作来访问本机元素，然后添加点击侦听器。

@ViewChild('btn') btn

不幸的是，当我在 ngAfterViewInit 中控制台记录 this.btn 时，我得到一个“未定义”。即使它确实有效，我认为附加监听器的方式必须比访问本机元素更具角度。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

您可以使用@ContentChild 或@ContentChildren 来访问组件内的投影子项：

您可以在此处阅读有关它的更多信息以及与@ViewChild 和@ViewChildren Content Child Docs 的异同

在您访问您的 Child/Children 后，您可以使用类似 rxjs 和 From Event 运算符来获取点击事件。

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

【讨论】：