把Kendo UI包裝成一個Angular 2組件

Question

我想將一個常規的Kendo UI小部件（編輯器）包裝到Angular 2組件中。這可能嗎。有人做過嗎？

我對角套房知道劍道UI 2.0的，我用它了，但不知道是否丟失的部件可以用角2

感謝

Answer 1

所以，這裏是可以仍然使用我是如何做到的：

• 首先，我在Index.html中包含了jQuery。我使用了CDN鏈接。

• 然後我得到了我需要的Kendo UI腳本。我用http://www.telerik.com/download/custom-download來創建一個較小的文件。

• 然後，我創建了一個組件來包裝劍道部件：

import { Component, Input, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core'; 
 
declare var $: any; //inject jQuery 
 

 
@Component({ 
 
\t moduleId: module.id, 
 
\t selector: 'editor', 
 
\t template: ` 
 
\t \t <textarea>{{ text }}</textarea> 
 
\t `, 
 
}) 
 

 
export class EditorComponent { 
 
\t @Input() text: string; 
 
\t @Output() onTextChanged = new EventEmitter<string>(); 
 

 
\t constructor(private elem: ElementRef) { 
 

 
\t } 
 

 
\t ngAfterViewInit() { 
 
\t \t var ta = this.elem.nativeElement.children[0]; 
 
\t \t var self = this; 
 
\t \t $(ta).kendoEditor({ 
 
\t \t \t tools: [ 
 
\t \t \t \t "bold", 
 
\t \t \t \t "italic", 
 
\t \t \t \t "underline", 
 
\t \t \t \t "strikethrough", 
 
\t \t \t \t "justifyLeft", 
 
\t \t \t \t "justifyCenter", 
 
\t \t \t \t "justifyRight", 
 
\t \t \t \t "justifyFull", 
 
\t \t \t \t "insertUnorderedList", 
 
\t \t \t \t "insertOrderedList", 
 
\t \t \t \t "indent", 
 
\t \t \t \t "outdent", 
 
\t \t \t \t "createLink", 
 
\t \t \t \t "unlink", 
 
\t \t \t \t "insertImage" 
 
\t \t \t ], 
 
\t \t \t change: function() { 
 
\t \t \t \t self.onTextChanged.emit(this.value()); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
}

• 然後使用它，我只是把它聲明爲：

<editor [text]="'Hello from the outside'" (onTextChanged)="editorTextChanged($event)" ></editor>

• 然後我只處理editorTextChanged事件。

我知道這不完全是角度的方式，但它的工作原理。如果有人有更好的做法，請在此分享。

謝謝。