javascript – Angular2与Jquery-ui Slider

我尝试使用带有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”准备好,只有水平滑块) .

解决方法

您需要在幻灯片回调中使用正确的上下文(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,slide: (event,ui) => {
                this.slideValue = ui.value;
                $amount.val(ui.value);
            }
        });
    }
}

javascript – Angular2与Jquery-ui Slider

解决方法

猜你在找的jQuery相关文章