Angular2 z Jquery-ui Slider

Question

Próbuję użyć suwaka Jquery-ui z angleular2. Chciałbym, aby zmienna "slideValue" wyświetlała wartość suwaka, ale nie mogę wymyślić, jak powiązać mój model lub zmienną z kątowego do suwaka. Oto mój komponent suwaka:

import {Component, ElementRef, Inject, OnInit} from 'angular2/core'; 

declare var jQuery:any; 

@Component({ 
    selector: 'slider', 
    template: 
    ` 
    <input type="text" [(ngModel)]="slideValue" id="amount" required placeholder="Enter a name here"> 
    <div id="slider"></div> 
    <h2>slideValue = {{slideValue}}</h2> 
    ` 
}) 

export class Slider implements OnInit { 
    elementRef: ElementRef; 
    slideValue: number; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() {   
     jQuery(this.elementRef.nativeElement).find("#slider").slider({ 
      range: false, 
      orientation: "vertical", 
      min: 0, 
      max: 100, 
      value: 60, 
      slide: function(event, ui) { 
      this.slideValue = ui.value; //doesn't seem to work 
      $("#amount").val(ui.value); 
      } 
     }); 

    } 
} 

Kod jest dostępny tutaj:

https://github.com/nerg/slider

chciałbym móc używać „pionowy suwak” z Angular2, więc jeśli jeszcze opłacalne rozwiązanie istnieje , Jestem zainteresowany (sprawdziłem materiał, ale nie wydaje się on być "kątowy2" gotowy i tylko poziomy suwak).

Answer 1

Musisz użyć właściwego kontekstu (this) wewnątrz wywołania zwrotnego slajdów. Strzałka funkcja rade w tym przypadku:

@Component({ 
    selector: 'slider', 
    template: ` 
     <input type="text" [(ngModel)]="slideValue" class="amount" required placeholder="Enter a name here"> 
     <div class="slider"></div> 
     <h2>slideValue = {{slideValue}}</h2> 
    ` 
}) 
export class Slider implements OnInit { 
    elementRef: ElementRef; 
    slideValue: number; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() { 
     var $amount = jQuery(this.elementRef.nativeElement).find(".amount"); 
     jQuery(this.elementRef.nativeElement).find(".slider").slider({ 
      range: false, 
      orientation: "vertical", 
      min: 0, 
      max: 100, 
      value: 60, 
      slide: (event, ui) => { 
       this.slideValue = ui.value; 
       $amount.val(ui.value); 
      } 
     }); 
    } 
} 

Answer 2

szukałem czegoś podobnego i natknąłem się na to:

https://www.npmjs.com/package/ng2-slider-component

Nie 100% dopracowana i github aktywność tyłu wygląda cienkie, ale najbliżej rodzimego elementu kątowego2, który wydaje się istnieć w momencie pisania tego tekstu.