angular – 我可以用其他鼠标事件运行@Hostlistner吗？

发布时间：2020-12-17 17:09:49 所属栏目：安全来源：网络整理

导读：为了避免设置一个无用的监听器,我想只在运行mousedown事件时启动mousemove监听器.像这样的东西：在我的组件里面 private startMouseMove(start: boolean){ if(start){ @HostListener('mousemove',['$event']) onMouseMove(event: MouseEvent){ console.log(

为了避免设置一个无用的监听器,我想只在运行mousedown事件时启动mousemove监听器.像这样的东西：

在我的组件里面

private startMouseMove(start: boolean){
   if(start){
        @HostListener('mousemove',['$event'])
        onMouseMove(event: MouseEvent){
             console.log("start mousemove");    
             this.mousemove.emit(event);
        }
    }
}

@HostListener('mouseup',['$event'])
onMouseup(event: MouseEvent){
    console.log(event.type);
    this.startMouseMove(false);
}

@HostListener('mousedown',['$event'])
onMousedown(event: MouseEvent) {
    console.log(event.type);
    this.startMouseMove(true);
    return false; // Call preventDefault() on the event
}

那当然不行.我想知道Angular中是否可能,如果可能,该怎么做？

解决方法

一种可能的解决方案是使用被动方法：

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/takeUntil';

@Directive({
    selector: '[my-drag]'
})
export class DragDirective {
    subscription: Subscription;

    constructor(private elRef: ElementRef,private zone: NgZone) {}

    ngOnInit() {
       this.zone.runOutsideAngular(() => this.initDragEvent());
    }

    initDragEvent() {
        const el = this.elRef.nativeElement;
        const mousedown = Observable.fromEvent(el,'mousedown');
        const mouseup   = Observable.fromEvent(el,'mouseup');
        const mousemove = Observable.fromEvent(document,'mousemove');
        const mousedrag = mousedown.flatMap((md: any) => {
            const startX = md.offsetX;
            const startY = md.offsetY;

            return mousemove.map((e: any) => {
                e.preventDefault();
                return {
                    left: e.clientX - startX,top: e.clientY - startY
                };
            }).takeUntil(mouseup);
        });

        this.subscription = mousedrag.subscribe((pos) => {
            console.log('mousemove is fired');
            el.style.top = pos.top + 'px';
            el.style.left = pos.left + 'px';
        });
    }

    ngOnDestroy() {
        if(this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}

我正在从角度区域运行initDragEvent,因为我不希望发生冗余更改检测.

另一种解决方案是使用Renderer

export class DragDirective {
    listener: Function;

    @HostListener('mouseup',['$event'])
    onMouseup(event: MouseEvent) {
        console.log(event.type);
        this.startMouseMove(false);
    }

    @HostListener('mousedown',['$event'])
    onMousedown(event: MouseEvent) {
        console.log(event.type);
        this.startMouseMove(true);
        return false;
    }

    constructor(private renderer: Renderer2) {}

    private startMouseMove(start: boolean) {
        this.ngOnDestroy();
        if (start) {
            this.listener = this.renderer.listen(document,'mousemove',() => {
                console.log("start mousemove",this.listener);
            })
        }
    }

    ngOnDestroy() {
        if(this.listener) {
            this.listener();
        }
    }
}

Plunker Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!