自定义范围组件中的PointerMove和PointerUp

时间:2018-08-11 09:59:33

标签: angular ionic-framework angular-components pointer-events

我想在离子项目中使用自定义范围组件。问题在于,不会触发诸如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>

任何帮助将不胜感激。

0 个答案:

没有答案