我正在使用内容投影将按钮放入组件中。
<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