如何将点击处理程序附加到预计的内容元素

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时，我得到了“未定义”。即使它确实起作用，我认为与访问本机元素相比，附加侦听器必须有更多角度的方法。

做到这一点的最佳方法是什么？

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

Answer 1

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

你可以用相似性和差异与这里一起阅读更多关于它@ViewChild和@ViewChildren 内容子文档

在您可以访问子级/子级之后，您可以使用rxjs和From Event Operator 这样的东西来获取click事件。

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

希望这可以帮助