如何使用Kendo UI Slider和Angular 2

我有一個角度2的應用程序，我想在它上面使用Kendo UI Slider。我嘗試了「Kendo UI for Angular 2」的測試版，但它沒有正常工作，我不想在生產系統上使用測試版。
我如何在Angular 2中使用普通的劍道滑塊？如何使用Kendo UI Slider和Angular 2

下面是我使用angular 1.58時的滑塊配置方式。我想對角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 
    };

來源

2016-10-21 LanceM

Kendo UI滑塊是基於jQuery的Kendo的一部分，對不對？你能解決它嗎？它工作嗎？我處於在Angular 2應用程序中必須使用基於jQuery的Kendo的情況。 – SayusiAndo

嗨SayusiAndo，是的，我已經解決它與下面的答案，它的工作原理。自從我的原始帖子以來，Telerik開發了一個Angular 2版本，所以我可以使用它。 – LanceM

下同選項是我的情況的解決方案可以幫助其他人（如果你看到任何潛在的問題或請評論如果能夠提高）：

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

來源

2016-10-21 16:45:54 LanceM

如何使用Kendo UI Slider和Angular 2

回答

相關問題