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的使用

---

周末好好的补了一下觉，周一精神满满，现在来讲讲怎么引入Swiper

这是Angular中使用Swiper教程的参考链接

首先要在项目中安装Swiper

npm install swiper --save

然后在angular.json里面引入swiper的js和css文件

当然你也可以在组件里面引用

然后就是安装模组定义档

npm install @types/swiper --save

配置tsconfig文件

当然如果你是npm安装的话，这里会自动配置好

下面是配置tsconfig.app.json

配置完成以后就可以在Angular里面使用Swiper了

这个是我自己项目里使用的的HTML代码

<div class="swiper-container" style="width: 100%;height: 100%">
 <div class="swiper-wrapper">
   <div class="swiper-slide" *ngFor="let data of manualDetail.contentList">
    <img [src]="data.url" alt="" style="width: 100%;height: 100%">
   </div>
 </div>
</div>

下面是ts代码

setTimeout(() => {//如果不设setTimeout 前进后退按钮就无效
      this.testSwiper = new Swiper('.swiper-container', {

        spaceBetween: 10,

        direction: 'horizontal',
        loop: false,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        watchSlidesVisibility: true,//防止不可点击
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });
    }, 0);

下面就是效果图了

其他的api可以在官网查到

不过有一些问题至今没有解决，就是官网的一些方法现在还没办法使用，比如说缩略图，写在ts里会报错。