如何獲得jQuery的範圍滑塊角2

Question

我能夠拖動滑塊的價值，但我不如何獲得滑塊的值..

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) { 


     } 
    }); 


} 

}

Answer 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/

Answer 2

爲什麼不只是簡單地做

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

把那個滑塊組件內發揮作用，或者是重要的它從外面打電話？