如何在角度2中获取jquery范围滑块的值答案

【问题标题】：How to get the value of the jquery range slider in angular 2如何在角度2中获取jquery范围滑块的值
【发布时间】：2016-04-26 09:02:02
【问题描述】：

我可以拖动滑块，但我不知道如何获取滑块的值..

ngOnInit() {             
    jQuery(this.elementRef.nativeElement).find("#slider").slider({
        range:true,
        orientation: "horizontal",
        min: 0,
        max: 100,
        step:1,
        value: [80, 100],

        slide: function (event, ui) {


        }
    });


}

}

【问题讨论】：

标签： jquery angular rangeslider

【解决方案1】：

您可以按照以下说明进行操作：

ngOnInit() {             
  jQuery(this.elementRef.nativeElement).find("#slider").slider({
    (...)
    slide: ( event, ui ) => {
      this.slideValue = ui.value;
    }
  }
}

注意使用箭头函数可以设置组件属性slideValue中的值。

编辑

您可以将滑块包装到符合 ngModel 的组件中。这是一个示例实现：

const SLIDER_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SliderComponent), multi: true});

@Component({
  selector: 'slider',
  template: `
    <div class="slider"></div>
  `,
  providers: [ SLIDER_VALUE_ACCESSOR ]
})
export class SliderComponent implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  constructor(private elementRef:ElementRef) {

  }

  ngAfterViewInit() {
    this.sliderElt = $(this.elementRef.nativeElement).find('.slider');
    this.sliderElt.slider({
      range:true,
      orientation: "horizontal",
      min: 0,
      max: 100,
      step:1,
      range: false,
      value: this.value,
      slide: (event, ui) => {
        this.onChange(ui.value);
      }
    });
    this.initialized = true;
  }

  writeValue(value:any):void {
    if (value!=null) {
      if (this.initialized) {
        this.sliderElt.slider('value', value);
      } else {
        this.value = value;
      }
    }
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

并以这种方式使用它：

@Component({
  selector: 'app'
  template: `
    <div>
      <slider [(ngModel)]="sliderValue"></slider>
      sliderValue: {{sliderValue}}<br/>
      <div (click)="updateValue()">update value</div>
    </div>
  `,
  directives: [ SliderComponent ]
})
export class App {
  sliderValue = 0;

  updateValue() {
    this.sliderValue = 40;
  }
}

看到这个 plunkr：https://plnkr.co/edit/GJZUakH6O2wclHxpwOP2?p=preview

您可以在“与 NgModel 兼容的组件”部分中查看这篇文章以了解更多详细信息：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

【讨论】：

我想在变量更改其值时将 this.slideValue 分配给全局变量？
如何将this.slideValue绑定到[(ngModel)]？？
您想将滑块包装到符合ngModel 的组件中吗？
无论我使用这个，表格内容都在闪烁和变化

【解决方案2】：

为什么不干脆做

  updateValue() {
    this.sliderValue = 40;
    this.sliderElt.slider('value', this.sliderValue)
  }

将该函数放在滑块组件中，还是从外部调用它很重要？

【讨论】：