ionic4中引入ng-zorro, 實現環形進度條

一、建立項目

ionic start myIonic tabs --type=angular

二、安裝ng-zorro 這個模塊依賴動畫模塊，因此安裝兩個插件

npm install @angular/animations@4.4.4 --save --save-exact

npm install ng-zorro-antd --save

三、配置ionic4默認tabs路由懶加載，因此須要這樣配置
app.modules.ts

...
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [NgZorroAntdModule.forRoot(), BrowserModule, IonicModule.forRoot(), AppRoutingModule],
...

home.module.ts中使用

...
import { NgZorroAntdModule } from 'ng-zorro-antd';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    NgZorroAntdModule,
...

home.page.html 就可使用了

<nz-progress [nzPercent]="75" nzType="circle"></nz-progress>

最後配置一下樣式文件 angular.json

"styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
              }
            ],

共用的一些module能夠自定義一個common-page.module.ts

具體實現代碼
一、common-page.module.ts

import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
    imports: [ NgZorroAntdModule ],
    exports: [ NgZorroAntdModule ]
})
export class CommonPageModule {}

二、home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { CommonPageModule } from './../common-page.module';
@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        CommonPageModule,
        RouterModule.forChild([ { path: '', component: HomePage } ])
    ],
    declarations: [ HomePage ]
})
export class HomePageModule {}

三、home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <nz-progress [nzPercent]="75" nzType="circle"></nz-progress>
</ion-content>