刘明野

Angular 监听事件 窗口滚动,窗口大小改变

Angular中使用fromEvent监听指定事件
导入rxjs包

import { ElementRef } from '@angular/core'
import { Subscription, fromEvent } from 'rxjs'
import { debounceTime } from 'rxjs/operators'

给DOM元素添加监听事件

export class ... implements AfterViewInit, OnDestroy {
    private subscription: Subscription
    constructor(
        private el: ElementRef<HTMLElement>
    ) {}
    
    ngAfterViewInit() {
        const scrollContainer = this.el.nativeElement.closest('.dom') as HTMLElement // 监听指定节点(元素)
        this.subscription = fromEvent(scrollContainer, 'scroll', { capture: true, passive: true })
        // scrollContainer为指定节点(元素),可以换成window
        // scroll监控滚动事件,resize为窗口大小改变,可换成需要的事件
        // passive:true //告诉浏览器不用调用preventDefault(),可以执行默认行为
        // capture:true,//事件捕获阶段,如果此元素的子元素被触发事件时,会先执行此事件
        .pipe(debounceTime(100)) // 设置时间间隔,优化性能
        .subscribe((event: Event) => this.onScroll(event.target as HTMLElement))
    }
    
    onScroll(target: HTMLElement) {
        console.log('事件执行了')
        console.log(target)
    }
    
    ngOnDestroy() {
        // 销毁事件
        this.subscription?.unsubscribe()
    }
}
本文为作者刘明野发布,未经允许禁止转载!
213
0
0
发表留言

友情链接