1

angular 2 アプリケーションがあり、Kendo UI Slider を使用したいと考えています。「Kendo UI for Angular 2」のベータ版を試してみましたが、うまく動作せず、本番システムでベータ版を使用したくありません。
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
    };
4

1 に答える 1

0

以下は、他の人に役立つ場合の私の解決策です（潜在的な問題がある場合、または改善できる場合はコメントしてください）：

スライダー.コンポーネント.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宣言に追加してください。

于 2016-10-21T16:45:54.030 に答える