Ionic4和NG-ZORRO-MOBILE結合
阿新 • • 發佈:2019-01-24
前言 |
小編在上篇部落格介紹了Ionic4 環境搭建,今天介紹下Ionic4和NG-ZORRO-MOBILE元件庫結合。
內容 |
什麼是NG-ZORRO-MOBILE?
NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移動端UI元件庫是 Ant Design
移動規範的 Angular 實現,詳情請檢視以下連結Ant Design Mobile of Angular
Ionic4和NG-ZORRO-MOBILE如何結合?
操作如下: 前提:已經搭建好Ionic4環境搭建,接入ng-zorro-antd-mobile,其中有兩種方式:
- ng add ng-zorro-antd-mobile
但這方式有個坑,它自動把app.component.html的內容強制替換為ng-zorro-antd-mobile的示例內容,所以執行完命令後要把app.component.html還原。用以下程式碼完全覆蓋ng-zorro-antd-mobile生成後的程式碼:
<ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>
- 使用npm,則先安裝模組,然後在 app.modules.ts 中,全域性引入 ng-zorro-antd-mobile:
npm install ng-zorro-antd-mobile --save import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile'; imports: [ ... NgZorroAntdMobileModule ]
這樣就可以使用ngzorro的元件啦。
小結 |