Angular2 with Jquery-ui Slider

Question

私はangle2のJquery-uiスライダを使用しようとしています。変数 "slideValue"にスライダの値を表示させたいのですが、スライダにモデルや変数を角度からバインドする方法を理解できません。ここに私のスライダー・コンポーネントは次のとおりです。

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

    } 
} 

コードがここにあります：

https://github.com/nerg/slider

私はAngular2で任意の「縦のスライダー」を使用できるようにしたいと思い、その別の実行可能な解決策が存在する場合、私は興味がある（私は材料をチェックしたが、それは "angular2"準備ができていないと水平スライダーのみ）ようではありません。

Answer 1

スライド・コールバック内で正しいコンテキスト（this）を使用する必要があります。

@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

私は似たものを探して、これに出くわしました：関数が、この場合にはトリックを行います矢印、その背後にある

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

ない100％研磨とgithubの活動が薄く見えますが、この記事の執筆時点で存在していたネイティブなangle2コンポーネントに最も近いものです。