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裏會報錯。