Question

我正在尝试将常规的Kendo UI小部件（编辑器）包装器放入Angular 2组件中。这可能吗。有人做过吗？

我知道Angular套件的Kendo UI 2，我已经使用它了，但是想知道丢失的小部件是否仍然可以与Angular 2一起使用。

由于

Answer 1

所以，我就是这样做的：

首先我在Index.html中包含了jQuery。我使用了CDN链接。
然后我得到了我需要的Kendo UI脚本。我使用http://www.telerik.com/download/custom-download创建了一个较小的文件。
然后我创建了一个组件来包装kendo小部件：

import { Component, Input, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
declare var $: any; //inject jQuery

@Component({
	moduleId: module.id,
	selector: 'editor',
	template: `
		<textarea>{{ text }}</textarea>
	`,
})

export class EditorComponent {
	@Input() text: string;
	@Output() onTextChanged = new EventEmitter<string>();

	constructor(private elem: ElementRef) {

	}

	ngAfterViewInit() {
		var ta = this.elem.nativeElement.children[0];
		var self = this;
		$(ta).kendoEditor({
			tools: [
				"bold",
				"italic",
				"underline",
				"strikethrough",
				"justifyLeft",
				"justifyCenter",
				"justifyRight",
				"justifyFull",
				"insertUnorderedList",
				"insertOrderedList",
				"indent",
				"outdent",
				"createLink",
				"unlink",
				"insertImage"
			],
			change: function () {
				self.onTextChanged.emit(this.value());
			}
		});
	}
}

然后使用它，我只是声明为：

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

然后我只处理editorTextChanged事件。

我知道这不是Angular方式，但它确实有效。如果有人有更好的方法，请在这里分享。

感谢。

将Kendo UI包装到Angular 2组件中

1 个答案: