如何使用 dualKnobs 检测 ionic 4 ion-range 中哪个旋钮发生了变化？

Question

我正在使用 ionic 4 和 ion-range，dualKnobs 设置为 true。我需要检测更新了哪个旋钮（左或右）并获取其值。有什么想法吗？

Answer 1

有点老套的方法，但它有效。

模板-

<ion-range id="dual-range" dual-knobs pin color="dark" (ionChange)="knobChange($event)" (ionBlur)="afterChange($event)">
  <ion-icon slot="start" size="small" name="brush"></ion-icon>
  <ion-icon slot="end" name="brush"></ion-icon>
</ion-range>

TypeScript 文件 -

...

export class DemoPage implements OnInit{

  upperValue: number;
  lowerValue: number;
  changedKnob: string;

  ngOnInit() {
    this.lowerValue = 33;
    this.upperValue = 60;
    const dualRange = document.querySelector('#dual-range') as HTMLIonRangeElement;
    dualRange.value = { lower: this.lowerValue, upper: this.upperValue };
  }

  knobChange(range: CustomEvent<RangeChangeEventDetail>) {
    if (range.detail.value['lower'] !== this.lowerValue) {
      this.lowerValue = range.detail.value['lower'];
      this.changedKnob = 'lower';
    } else if (range.detail.value['upper'] !== this.upperValue) {
      this.upperValue = range.detail.value['upper'];
      this.changedKnob = 'upper';
    }
  }

  afterChange() {
    if (this.changedKnob === 'upper') {
      console.log('upper is changed. value : ' + this.upperValue);
    } else {
      console.log('lower is changed. value : ' + this.lowerValue);
    }

  }

}

如何使用 dualKnobs 检测 ionic 4 ion-range 中哪个旋钮发生了变化？

How to detect which knob was changed in ionic 4 ion-range with duallKnobs?

ionic4