为了避免设置一个无用的监听器,我想只在运行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();
}
}
}
