当我以 react 形式将 slider 与具有 ChangeDetectionStrategy.OnPush
的组件一起使用时,即使数字更新, slider 指针也不会移动。
这是我的组件代码:
import { Component, AfterContentChecked, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { Options } from 'ng5-slider';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
form: FormGroup = new FormGroup({
sliderControl: new FormControl([20, 80])
});
options: Options = {
floor: 0,
ceil: 100,
showOuterSelectionBars: true
}
minValue = 20;
maxValue = 80;
}
<div class="custom-slider" [formGroup]="form">
<ng5-slider
formControlName="sliderControl"
[options]="options"
>
</ng5-slider>
</div>
<div class="custom-slider">
<ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ng5-slider>
</div>
如您所见,我也尝试过使用模板表单以及 slider 更新的地方。您可以在此处查看完整示例 StackBlitz
最佳答案
我所做的是将 ng5-slider 包装在组件中
export class ControlWrapper implements ControlValueAccessor {
public writeValue(obj: any) {
}
public registerOnChange(fn: any) {
}
public registerOnTouched(fn: any) {
}
public setDisabledState?(isDisabled: boolean) {
}
}
我的 slider .html
<ng5-slider
[options]="options"
[formControl]="ngControl.control"
(ngModelChange)="onChange()"
></ng5-slider>
我的 slider .ts
@Component({
selector: 'my-slider',
templateUrl: './my-slider.html'
})
export class MySlider extends ControlWrapper {
public options: Options = {
animate: false,
step: 1
};
@Input()
public set min(v: number) {
this.options = {
...this.options,
floor: v
};
}
@Input()
public set max(v: number) {
this.options = {
...this.options,
ceil: v
};
}
constructor(
@Optional()
@Self()
public ngControl: NgControl,
private changeDetector: ChangeDetectorRef
) {
super();
this.ngControl.valueAccessor = this;
}
public onChange() {
this.changeDetector.detectChanges();
}
}
关于angular - ng5- slider : Dragging pointers not moving when used in a Angular reactive form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58956465/