我想在离子项目中使用自定义范围组件。问题在于,不会触发诸如PointerMove和PointerUp之类的指针事件,只是会触发pointerDown。
这是我的内容ts:
import { Component, ElementRef, Output, Input, EventEmitter, OnInit, NgZone } from '@angular/core';
import { Platform } from 'ionic-angular/platform/platform';
import { UIEventManager } from 'ionic-angular/gestures/ui-event-manager';
import { PointerEvents } from 'ionic-angular/gestures/pointer-events';
@Component({
selector: 'dim-slider',
templateUrl: 'dim-slider.html'
})
export class DimSliderComponent implements OnInit {
text: string;
@Output() ionChange: EventEmitter<any> = new EventEmitter();
_el: HTMLElement;
_plt: Platform;
_uiEventManager: UIEventManager;
constructor(public zone: NgZone, el: ElementRef, plt: Platform) {
this._el = el.nativeElement;
this._plt = plt;
this._uiEventManager = new UIEventManager(plt);
}
ngOnInit(){
this._uiEventManager.pointerEvents({
element: this._el,
pointerDown: this._pointerDown.bind(this),
pointerMove: this._pointerMove.bind(this),
pointerUp: this._pointerUp.bind(this),
zone: true
});
}
_pointerMove(): void{
console.log('pointer is moving!');
};
_pointerUp(): void{
console.log('pointer up was triggered!');
};
_pointerDown(): void{
console.log('pointer down was triggered!');
};
}
这是我的html组件:
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
任何帮助将不胜感激。