ionic4中引入ng-zorro, 实现环形进度条_angularjs

上一篇: Ionic生命周期下一篇:Angular2开发踩坑系列-生产环境编...

ionic4中引入ng-zorro, 实现环形进度条

发布时间：2019-06-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了ionic4中引入ng-zorro, 实现环形进度条，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


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 就可以使用了

      
      
      ITle="" data-original-title="复制">
      
      
<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>