@HostListener事件委托
时间: 2023-10-02 16:05:32 浏览: 43
@HostListener事件委托是Angular框架中一种用于在组件中监听DOM事件的机制。它通过在组件类中添加@HostListener装饰器,来绑定特定的事件处理函数到组件的宿主元素上。
例如,以下代码在组件初始化时,将一个点击事件处理函数绑定到组件的宿主元素上:
```
@Component({
selector: 'app-my-component',
template: '<button>Click me!</button>',
})
export class MyComponent implements OnInit {
ngOnInit() {
const hostElement = this.elementRef.nativeElement;
hostElement.addEventListener('click', this.handleClick);
}
handleClick(event) {
console.log('Clicked!');
}
}
```
使用@HostListener装饰器,可以将上述代码简化为以下代码:
```
@Component({
selector: 'app-my-component',
template: '<button>Click me!</button>',
})
export class MyComponent {
@HostListener('click')
handleClick() {
console.log('Clicked!');
}
}
```
在这个例子中,@HostListener装饰器会将handleClick函数绑定到组件的宿主元素上的点击事件。这样,当宿主元素被点击时,handleClick函数就会被调用。