如何在 Angular 2 中使用 Kendo UI Slider

Question

我有一个 angular 2 应用程序，我想在它上面使用 Kendo UI Slider。我尝试了“Angular 2 的 Kendo UI”的 Beta 版本，但它不能正常工作，我不想在生产系统上使用 Beta 版本。
如何在 Angular 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
    };

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

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 声明中。