如何将剑道UI滑块与Angular 2配合使用

我有一个angular 2应用程序，我想在上面使用剑道UI滑块。我尝试了“Angular 2剑道UI”的测试版，但它没有正常工作，我不想在生产系统上使用测试版。
如何将正常剑道滑块与角度2配合使用

下面是我使用angular 1.58时滑块的配置。我想为angular 2提供相同的选项

<input kendo-slider k-options="slideroptions" k-max="NoOfCells" k-rebind="NoOfCells" ng-model="NoOfUnits" k-tooltip="{ enabled: true }" /> 

scope.slideroptions = {
        largeStep: 1,
        min: 1
    };

scope.slideroptions={
最大步骤：1，
min:1
};

以下是我的解决方案，以防对其他人有所帮助（如果您发现任何潜在问题或可以改进，请发表评论）：

slider.component.ts：

 import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core';
 import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms';

declare var jQuery: any;

@Component({
    selector: 'slider',
    template: ` <div class="kendoslider">            
                    <input type="text">            
                    <input type="text">        
                </div>  `,
providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }
]
})

exportclass SliderComponent implements ControlValueAccessor
{
private _slider: any;

@Input('sliderValue') _sliderValue: number = 1;
@Input('min') _min: number = 1;
@Input('max') _max: number = 10;
@Input('smallStep') _smallStep: number = 1;
@Input('largeStep') _largeStep: number = 1;
@Input('tickPlacement') _tickPlacement: string = "both";

get sliderValue()
{
    return this._sliderValue;
}

set sliderValue(val)
{
    this._sliderValue = val;
    this.propagateChange(val);
}

propagateChange: any = () => {  };

validateFn: any = () => { };

constructor()
{

}

writeValue(value: any)
{
    if (value)
    {
        this.sliderValue = value;
    }
}

registerOnChange(fn: any)
{
    this.propagateChange = fn;
}

registerOnTouched(){}

validate(c: FormControl)
{
    return this.validateFn(c);
}

ngOnChanges()
{
    if (this._slider)
    {
        let wrapper: any = this._slider.wrapper;
        let element: any = this._slider.element;

        // detach events
        this._slider.destroy();

        // remove slider html from DOM
        wrapper.before(element.show());
        wrapper.remove();

        this._slider = null;

        this.initialiseSlider();

        this._slider.enable();
    }
    else
    {
        this.initialiseSlider();
    }
}

initialiseSlider(): void
{
    if (!this._slider)
    {
        this._slider = jQuery(".kendoslider").kendoSlider({
            change: (e: any) =>
            {
                this.writeValue(e.value);
            },
            precision: 0,
            min: Number(this._min),
            max: Number(this._max),
            smallStep: Number(this._smallStep),
            largeStep: Number(this._largeStep),
            tickPlacement: Number(this._tickPlacement)
        }).data("kendoSlider");

        this._slider.value(Number(this._max));
    }
}  
}

从'@angular/core'导入{Component，OnInit，forwardRef，Input，OnChanges}；
从'@angular/forms'导入{FormControl，ControlValueAccessor，NG_VALUE_ACCESSOR，NG_VALIDATORS}；
声明var jQuery:any；
@组成部分({
选择器：“滑块”，
模板：`
`,
供应商：[
{provide:NG_VALUE_访问器，useExisting:forwardRef（（）=>SliderComponent），multi:true}，
{提供：NG_验证程序，使用现有的：forwardRef（（）=>SliderComponent），multi:true}
]
})
exportclass SliderComponent实现ControlValueAccessor
{
私人滑杆：任何；
@输入（'sliderValue'）_sliderValue:number=1；
@输入（'min'）_min:number=1；
@输入（'max'）_max:number=10；
@输入（'smallStep'）_smallStep:number=1；
@输入（'largeStep'）_largeStep:number=1；
@输入（'tickPlacement'）\u tickPlacement:string=“两者”；
获取sliderValue（）
{
返回此值。\u sliderValue；
}
设置滑动值（val）
{
这是。_sliderValue=val；
这一变化（val）；
}
传播更改：any=（）=>{}；
validateFn:any=（）=>{}；
构造函数（）
{
}
writeValue（值：任意）
{
如果（值）
{
this.sliderValue=值；
}
}
注册变更（fn：任何）
{
这一变化=fn；
}
寄存器（）{}
验证（c:FormControl）
{
返回此。validateFn（c）；
}
ngOnChanges（）
{
如果（此._滑块）
{
让wrapper:any=this.\u slider.wrapper；
let element:any=this.\u slider.element；
//分离事件
这个._slider.destroy（）；
//从DOM中删除html滑块
wrapper.before（element.show（））；
wrapper.remove（）；
这是.\u slider=null；
this.initialiseSlider（）；
这是._slider.enable（）；
}
其他的
{
this.initialiseSlider（）；
}
}
initialiseSlider（）：void
{
如果（！this.\u滑块）
{
这个.u slider=jQuery（“.kendoslider”）.kendoslider({
更改：（e:任何）=>
{
this.writeValue（即值）；
},
精度：0，
最小值：编号（此为.\u最小值），
最大值：数字（此为最大值），
smallStep：编号（此._smallStep），
largeStep：编号（此._largeStep），
tickPlacement:编号（此.\u tickPlacement）
}).数据（“kendoSlider”）；
此.u滑块值（数字（此.u最大值））；
}
}  
}

Index.html中的引用：

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" /> 
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.userevents.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.draganddrop.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.slider.min.js"></script>

组件中的用法：

<slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>

---

请确保导入slider.component并添加到app.modules.ts中的@NgModule声明中。

以下是我的解决方案，以防对其他人有所帮助（如果您发现任何潜在问题或可以改进，请发表评论）：

slider.component.ts：

 import { Component, OnInit, forwardRef, Input, OnChanges } from'@angular/core';
 import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from'@angular/forms';

declare var jQuery: any;

@Component({
    selector: 'slider',
    template: ` <div class="kendoslider">            
                    <input type="text">            
                    <input type="text">        
                </div>  `,
providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true },
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => SliderComponent), multi: true }
]
})

exportclass SliderComponent implements ControlValueAccessor
{
private _slider: any;

@Input('sliderValue') _sliderValue: number = 1;
@Input('min') _min: number = 1;
@Input('max') _max: number = 10;
@Input('smallStep') _smallStep: number = 1;
@Input('largeStep') _largeStep: number = 1;
@Input('tickPlacement') _tickPlacement: string = "both";

get sliderValue()
{
    return this._sliderValue;
}

set sliderValue(val)
{
    this._sliderValue = val;
    this.propagateChange(val);
}

propagateChange: any = () => {  };

validateFn: any = () => { };

constructor()
{

}

writeValue(value: any)
{
    if (value)
    {
        this.sliderValue = value;
    }
}

registerOnChange(fn: any)
{
    this.propagateChange = fn;
}

registerOnTouched(){}

validate(c: FormControl)
{
    return this.validateFn(c);
}

ngOnChanges()
{
    if (this._slider)
    {
        let wrapper: any = this._slider.wrapper;
        let element: any = this._slider.element;

        // detach events
        this._slider.destroy();

        // remove slider html from DOM
        wrapper.before(element.show());
        wrapper.remove();

        this._slider = null;

        this.initialiseSlider();

        this._slider.enable();
    }
    else
    {
        this.initialiseSlider();
    }
}

initialiseSlider(): void
{
    if (!this._slider)
    {
        this._slider = jQuery(".kendoslider").kendoSlider({
            change: (e: any) =>
            {
                this.writeValue(e.value);
            },
            precision: 0,
            min: Number(this._min),
            max: Number(this._max),
            smallStep: Number(this._smallStep),
            largeStep: Number(this._largeStep),
            tickPlacement: Number(this._tickPlacement)
        }).data("kendoSlider");

        this._slider.value(Number(this._max));
    }
}  
}

从'@angular/core'导入{Component，OnInit，forwardRef，Input，OnChanges}；
从'@angular/forms'导入{FormControl，ControlValueAccessor，NG_VALUE_ACCESSOR，NG_VALIDATORS}；
声明var jQuery:any；
@组成部分({
选择器：“滑块”，
模板：`
`,
供应商：[
{provide:NG_VALUE_访问器，useExisting:forwardRef（（）=>SliderComponent），multi:true}，
{提供：NG_验证程序，使用现有的：forwardRef（（）=>SliderComponent），multi:true}
]
})
exportclass SliderComponent实现ControlValueAccessor
{
私人滑杆：任何；
@输入（'sliderValue'）_sliderValue:number=1；
@输入（'min'）_min:number=1；
@输入（'max'）_max:number=10；
@输入（'smallStep'）_smallStep:number=1；
@输入（'largeStep'）_largeStep:number=1；
@输入（'tickPlacement'）\u tickPlacement:string=“两者”；
获取sliderValue（）
{
返回此值。\u sliderValue；
}
设置滑动值（val）
{
这是。_sliderValue=val；
这一变化（val）；
}
传播更改：any=（）=>{}；
validateFn:any=（）=>{}；
构造函数（）
{
}
writeValue（值：任意）
{
如果（值）
{
this.sliderValue=值；
}
}
注册变更（fn：任何）
{
这一变化=fn；
}
寄存器（）{}
验证（c:FormControl）
{
返回此。validateFn（c）；
}
ngOnChanges（）
{
如果（此._滑块）
{
让wrapper:any=this.\u slider.wrapper；
let element:any=this.\u slider.element；
//分离事件
这个._slider.destroy（）；
//从DOM中删除html滑块
wrapper.before（element.show（））；
wrapper.remove（）；
这是.\u slider=null；
this.initialiseSlider（）；
这是._slider.enable（）；
}
其他的
{
this.initialiseSlider（）；
}
}
initialiseSlider（）：void
{
如果（！this.\u滑块）
{
这个.u slider=jQuery（“.kendoslider”）.kendoslider({
更改：（e:任何）=>
{
this.writeValue（即值）；
},
精度：0，
最小值：编号（此为.\u最小值），
最大值：数字（此为最大值），
smallStep：编号（此._smallStep），
largeStep：编号（此._largeStep），
tickPlacement:编号（此.\u tickPlacement）
}).数据（“kendoSlider”）；
此.u滑块值（数字（此.u最大值））；
}
}  
}

Index.html中的引用：

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" /> 
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.userevents.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.draganddrop.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.slider.min.js"></script>

组件中的用法：

<slidername="kSlider"[(ngModel)]=".NoOfUnits"min="1"[max]="NoOfCells"largeStep="1"smallStep="1"></slider>

确保导入slider.component并添加到app.mo中的@NgModule声明中