Как использовать слайдер Kendo UI с угловым 2

Question

У меня есть приложение с угловым 2, и я хочу использовать его слайдер Kendo UI. Я попробовал бета-версию «Kendo UI для Angular 2», но он не работал должным образом, и я не хочу использовать бета-версию на производственной системе.
Как я могу использовать обычный слайдер кендо с угловым 2?

Ниже приведено описание моего слайдера при использовании углового 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 
    }; 

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 и добавьте объявления @NgModule в app.modules.ts.