在Angular 7中,可以使用@HostListener
装饰器来检测用户交互的变化。以下是一个示例:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
console.log('User scrolled');
}
@HostListener('document:mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
console.log('User moved mouse');
}
onClick() {
console.log('User clicked button');
}
}
在上面的示例中,我们使用@HostListener
装饰器来监听window:scroll
和document:mousemove
事件。当用户滚动窗口或移动鼠标时,相应的方法onScroll
和onMouseMove
将被调用,并输出一条消息到控制台。
此外,我们还可以使用@HostListener
来监听其他事件,例如window:resize
、window:keydown
等等。只需将事件名称作为装饰器的参数,并在方法中处理相应的逻辑即可。
注意:@HostListener
装饰器只能用于组件类中的方法。