如何将单击处理程序附加到投影内容元素

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

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

实现这一目标的最佳方法是什么？

堆栈闪电战示例：https://stackblitz.com/edit/angular-cj4bz1?file=src%2Fapp%2Fhello.component.ts

Answer 1

您可以使用@ContentChild或@ContentChildren，它使您可以访问组件中的投影子项：

您可以在此处阅读有关它的更多信息以及与@ViewChild和@ViewChildren内容的异同 子文档

在获得对子项/子项的访问权限后，您可以使用 rxjs 和 From 事件运算符之类的内容来获取点击事件。

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