ionic3 自定义组件 （进度条）

在每一个项目中，总会有好些地方重复。至于这些复用性较高的代码，可以直接提取出来，封装成一个组件或者服务类。这样方便维护与简洁代码。

1. 创建组件

在根目录下，命令创建

$ ionic g component  progress-bar

图片.png

创建成功后，会自动导入到components.module文件，如果自定义的组件需要用到ionic的组件，则需要在此引入IonicModule

2. 修改组件

.html

  
 
      
 
          {{proportion}} 
      
 
  
 

.scss

div { font-size: 12px; } 
#n { margin:10px auto; width:920px; border:1px solid #CCC;
 font-size:14px; line-height:30px; } 
#n a { padding:0 4px; color:#333 } 
.Bar ,.Bars { position: relative; width: 120px;border-radius: 9999px;
    /* 宽度 */ border: 1px solid #B1D632; padding: 1px; } 
.Bar div,.Bars div { display: block; position: relative;
 background:#00F;/* 进度条背景颜色 */ color: #333333;
 height: 12px; /* 高度 */ line-height: 12px;border-radius: 9999px;
  /* 必须和高度一致，文本才能垂直居中 */ } 
.Bars div{ background:color($colors, primary) ;} 
.Bar div span,.Bars div span { position: absolute;width: 120px;
 /* 宽度 */ text-align: center; font-weight: bold; } 
.cent{ margin:0 auto; width:300px; overflow:hidden} 

.ts

import { Component, Input, OnInit, OnChanges } from '@angular/core';

/**
 * Generated class for the ProgressBar page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html',
})
export class ProgressBarComponent implements OnInit, OnChanges {
  @Input()
  total: any;//总数
  @Input()
  amount: any;//使用数
  length: any;//颜色长度
  proportion: any;//比例值

  constructor() {
    this.length = {
      'width': '0%',
      'transition': 'width 1s',
      '-webkit-transition': 'width 1s'
    }
  }

  ngOnInit() {
    this.setData();
  }

  /**
   * 设置数据
   */
  setData(){
    this.proportion = Math.round(this.amount / this.total * 100);
    if (this.proportion) {
      this.proportion += '%';
    } else {
      this.proportion = '0%';
    }
    setTimeout(() => {
      this.length.width = this.proportion;
    }, 200);//设置延迟，让动画动起来
  }

  /**
   * 数据变化
   */
  ngOnChanges() {
    //重新更新数据
    this.setData();
  }
}

3. 调用

如果调用的页面不是懒加载页面，则在app.module导入
如果调用的页面是懒加载页面，则在页面对应的xxx.module导入

图片.png

在需要显示的页面，传入两个参数

图片.png

4. 效果

2.gif

此外，Input ， Output ， EventEmitter 可用来实现组件之间的通讯