Angular项目中使用Swiper和Ueditor

这一阵子开始学习angular，张dalao给我一个阉割了很多功能的初级后台项目作为练手，虽然初级，但是有些东西对于初学者来说真的很难，就比如说现在就要讲的引入Swiper和Ueditor这两个插件。难点在于这两个东西都挺老的了，Swiper还好，而Ueditor已经很久没有更新了，在网上查了很久，磕磕绊绊，终于顺利的把这两个东西引入到了项目里。废话不多说，上图上代码先讲Ueditor吧，下图是引入以后的Ueditor富文本编辑器这个是Ueditor的GitHub地址按照GitHub的教程来先把文件download下来然后在项目里安装npm install ngx-ueditor –save然后在AppModel.ts里面引入下面的代码import { BrowserModule } from ‘@angular/platform-browser’;import { FormsModule } from ‘@angular/forms’;import { UEditorModule } from ’ngx-ueditor’;@NgModule({ imports: [ BrowserModule, FormsModule, UEditorModule.forRoot({ js: [ ./assets/ueditor/ueditor.config.js, ./assets/ueditor/ueditor.all.min.js, ], // 默认前端配置项 options: { UEDITOR_HOME_URL: ‘./assets/ueditor/’ } }) ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { }可以看到js:[]里面引入了两个js文件，这两个文件就在刚刚下下来的压缩包里路径有点复杂ngx-ueditor-master\src\assets把这个ueditor文件夹整个解压到项目里的assets目录下，这样准备工作就做完了接下来就是在组件里面用了下面的是html代码<ueditor [(ngModel)]=“html” //双向绑定编辑器的内容[config]=“editorConfig” //配置[loadingTip]="‘加载中……’" //加载时的文字(onReady)="_ready($event)" //加载完成时的回调(onDestroy)="_destroy()" //销毁时的回调(ngModelChange)="_change($event)" //内容改变时的回调></ueditor>接下来是ts代码 html = ``; //编辑器内容 editorConfig={ wordCount: true, // 文字计数 initialFrameHeight: 300, // 设置高度 initialFrameWidth: ‘100%’, // 设置宽度 } _ready($event){ } _destroy(){ } _change($event){ }具体的API可以在文档里面的查到，就不多说这样就可以在Angular里面使用Ueditor了下班咯，明天再更新一下Swiper的使用