1、创建项目
ionic start myIonic tabs --type=angular
2、安装ng-zorro 这个模块依赖动画模块,所以安装两个插件
npm install @angular/animations@4.4.4 --save --save-exact
npm install ng-zorro-antd --save
3、配置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
具体实现代码
1、common-page.module.ts
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';
@NgModule({
imports: [ NgZorroAntdModule ],
exports: [ NgZorroAntdModule ]
})
export class CommonPageModule {}
2、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 {}
3、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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。