mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
fix(range): prevent change detection exception
This commit is contained in:
@ -4,7 +4,7 @@ import {NG_VALUE_ACCESSOR} from '@angular/common';
|
|||||||
import {Form} from '../../util/form';
|
import {Form} from '../../util/form';
|
||||||
import {isTrueProperty, isNumber, isString, isPresent, clamp} from '../../util/util';
|
import {isTrueProperty, isNumber, isString, isPresent, clamp} from '../../util/util';
|
||||||
import {Item} from '../item/item';
|
import {Item} from '../item/item';
|
||||||
import {pointerCoord, Coordinates} from '../../util/dom';
|
import {pointerCoord, Coordinates, raf} from '../../util/dom';
|
||||||
|
|
||||||
|
|
||||||
const RANGE_VALUE_ACCESSOR = new Provider(
|
const RANGE_VALUE_ACCESSOR = new Provider(
|
||||||
@ -343,11 +343,11 @@ export class Range {
|
|||||||
this._renderer.setElementStyle(this._bar.nativeElement, 'left', barL);
|
this._renderer.setElementStyle(this._bar.nativeElement, 'left', barL);
|
||||||
this._renderer.setElementStyle(this._bar.nativeElement, 'right', barR);
|
this._renderer.setElementStyle(this._bar.nativeElement, 'right', barR);
|
||||||
|
|
||||||
this.createTicks();
|
|
||||||
|
|
||||||
// add touchstart/mousedown listeners
|
// add touchstart/mousedown listeners
|
||||||
this._renderer.listen(this._slider.nativeElement, 'touchstart', this.pointerDown.bind(this));
|
this._renderer.listen(this._slider.nativeElement, 'touchstart', this.pointerDown.bind(this));
|
||||||
this._mouseRemove = this._renderer.listen(this._slider.nativeElement, 'mousedown', this.pointerDown.bind(this));
|
this._mouseRemove = this._renderer.listen(this._slider.nativeElement, 'mousedown', this.pointerDown.bind(this));
|
||||||
|
|
||||||
|
this.createTicks();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -544,6 +544,8 @@ export class Range {
|
|||||||
*/
|
*/
|
||||||
createTicks() {
|
createTicks() {
|
||||||
if (this._snaps) {
|
if (this._snaps) {
|
||||||
|
raf(() => {
|
||||||
|
// TODO: Fix to not use RAF
|
||||||
this._ticks = [];
|
this._ticks = [];
|
||||||
for (var value = this._min; value <= this._max; value += this._step) {
|
for (var value = this._min; value <= this._max; value += this._step) {
|
||||||
var ratio = this.valueToRatio(value);
|
var ratio = this.valueToRatio(value);
|
||||||
@ -553,9 +555,7 @@ export class Range {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.updateTicks();
|
this.updateTicks();
|
||||||
|
});
|
||||||
} else {
|
|
||||||
this._ticks = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import {Component} from '@angular/core';
|
import {Component} from '@angular/core';
|
||||||
import {ionicBootstrap} from '../../../../../src';
|
import {ionicBootstrap, Range} from '../../../../../src';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -13,7 +13,7 @@ class Page1 {
|
|||||||
dualValue: any;
|
dualValue: any;
|
||||||
dualValue2 = {lower: 33, upper: 60};
|
dualValue2 = {lower: 33, upper: 60};
|
||||||
|
|
||||||
rangeChange(ev) {
|
rangeChange(ev: Range) {
|
||||||
console.log(`range, change, ratio: ${ev.ratio}, value: ${ev.value}`);
|
console.log(`range, change, ratio: ${ev.ratio}, value: ${ev.value}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user