Angular2與Jquery-ui滑塊

Question

我嘗試使用帶有angular2的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活動看起來很薄，但最接近本文angular2組件似乎在撰寫本文時存在。