Jquery-ui Kaydırıcı ile Açısal2

Question

Jquery-ui kaydırıcısını angular2 ile kullanmaya çalışıyorum. Kaydırıcının değerini gösteren "slideValue" değişkenine sahip olmak isterdim ama modelimi veya bir değişkeni açısaldan kaydırıcıya nasıl bağlayacağımı anlayamıyorum. burada mevcut

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 edilir: İşte benim kaydırıcı bileşenidir

https://github.com/nerg/slider

başka makul çözüm varsa bu yüzden, Angular2 ile herhangi bir "dikey kaydırma çubuğunu" kullanabilmek için istiyorum , Ben ilgileniyorum (malzeme kontrol ettim ama "angular2" hazır ve sadece yatay kaydırıcı gibi görünmüyor).

Answer 1

Slayt bağlamında doğru bağlam (this) kullanmanız gerekir. Ok fonksiyonu bu durumda hile olacaktır:

@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

Ben benzer bir şey arıyordu ve bu rastladım:

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

Değil% 100 ince görünüyor arkasında cilalı ve github faaliyeti ancak Bu yazı yazıldığı zaman var olan bir yerel angular2 bileşenine en yakın şey.