将打字稿库添加到angular [英] Add a typescript library to angular
本文介绍了将打字稿库添加到angular的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我安装了一个名为 Jodit 的文本编辑器,尝试将其集成到我的角度应用程序时遇到一些问题.
我按顺序做了:
I installed a text editor called Jodit and I'm having some issues trying to integrate it into my angular application.
In order, I did:
-
npm install --save jodit
- 在angular.json中添加了build-options-sripts
"node_modules/jodit/build/jodit.min.js"
- 添加了angular.json构建选项样式
"node_modules/jodit/build/jodit.min.css"
这是我的组件:
import * as jodit from 'jodit';
@Component({
selector: 'app-test',
styleUrls: ['./test.component.scss'],
template: `
<textarea id="test" name="editor"></textarea>
`
})
export class TestComponent implements OnInit {
public editor: any;
constructor() {}
ngOnInit() {//
const elem: HTMLElement = document.getElementById('test');
this.editor = new jodit.Jodit(elem, {});
}
出现以下错误
src/app/test.component.ts(21,28): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
src/app/test.component.ts(41,27): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
我无法编译它,但是使用 npm start
可以使它工作(我仍然有错误,但可以编译,并且可以看到文本编辑器).
我是否缺少某些内容,看起来像是类型链接错误?
I can't compile it, but with npm start
I can make it working (I still have the errors but it compiles and I can see the text editor).
Am I missing something, it looks like a type linkage error?
推荐答案
我尝试创建angular模块,但是现在您可以像这样使用它在您的 angular.json
I try to create angular module, but now you can use it like this in your angular.json
"scripts": [
"../node_modules/jodit/build/jodit.min.js",
],
在 typings.d.ts 中添加
declare var Jodit: any;
并创建这样的组件
import {
Component,
OnDestroy,
AfterViewInit,
EventEmitter,
Input,
Output
} from '@angular/core';
@Component({
selector: 'simple-jodit',
template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy {
@Input() elementId: String;
@Output() onEditorKeyup = new EventEmitter<any>();
editor;
ngAfterViewInit() {
this.editor = new Jodit('#' + this.elementId, {});
}
ngOnDestroy() {
this.editor.destruct();
}
}
并使用它
<simple-jodit
[elementId]="'my-editor-id'"
(onEditorKeyup)="keyupHandlerFunction($event)"
>
</simple-jodit>
这篇关于将打字稿库添加到angular的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文