angular - ng5- slider : Dragging pointers not moving when used in a Angular reactive form

Question

当我以 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

Answer 1

我所做的是将 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();
  }

}