Wie den Wert des jquery Bereichsschiebereglers in Winkeln 2

Question

ich in der Lage zu bekommen, bin den Schieber zu ziehen, aber ich weiß nicht, wie die Werte des Schiebers zu bekommen ..

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

Sie können dies tun, wie unten beschrieben:

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

Beachten Sie die Verwendung eines Pfeils Funktion nutzen können slideValue den Wert in der Komponenteneigenschaft setzen.

bearbeiten

Sie den Regler in eine ngModel-kompatible Komponente wickeln kann. Hier ist eine Beispielimplementierung:

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; } 
} 

Und es auf diese Weise verwenden:

@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; 
    } 
} 

dieses plunkr Siehe: https://plnkr.co/edit/GJZUakH6O2wclHxpwOP2?p=preview

Sie könnten einen Blick auf diesen Artikel haben, um weitere Informationen im Abschnitt „NgModel -kompatiblen Komponente ":

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

Answer 2

warum nicht einfach tun

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

Put, die innerhalb Slider-Komponente funktionieren, oder ist es wichtig, sie von außen zu nennen?