svg环形进度条，angualr4/ionc3中使用

1、封装组建 注意svg的属性 需要转换 [attr.cx] == cx

circle.component.html

<div (tap)="getColorRedFun(5)">子界面中增加进度</div>
<!-- 
    注意
    svg标签中的属性如果使用双向绑定数据{{}}就会报错
    解决方法 cx属性 => [attr.cx]
-->
<svg xmlns="http://www.w3.org/200/svg">
    <circle [attr.cx]="cx" [attr.cy]="cy" [attr.r]="cr" fill="none" stroke="grey" [attr.stroke-width]="cb" stroke-linecap="round"
    />
    <circle class="demo2" #dome2 [attr.cx]="cx" [attr.cy]="cy" [attr.r]="cr" fill="none" stroke="red" [attr.stroke-width]="cb"
        stroke-dasharray="0, 10000" />
</svg>

circle.component.ts

import {
  Component,
  ViewChild,
  ElementRef,
  OnInit,
  Input,
  Output
} from "@angular/core";
@Component({
  selector: "page-circle",
  templateUrl: "./circle.component.html"
})
export class CircleComponent implements OnInit {
  @ViewChild("dome2") colorRed: ElementRef;
  /*
    cx: 绘制圆圈的宽度，
    cy: 绘制圆圈的高度，
    cr: 绘制圆圈的半径，
    cb: 绘制圆圈的边框宽度,
    start_all: 开始进度位置和总量 "0, 100"
  */
  @Input()
  cx: number;
  @Input()
  cy: number;
  @Input()
  cr: number;
  @Input()
  cb: number;
  @Input()
  start: number = 0;

  constructor() {
    this.cx ? this.cx : 52;
    this.cy ? this.cy : 52;
    this.cr ? this.cr : 50;
    this.cb ? this.cb : 2;
    this.start ? this.start : 0;
  }

  ngOnInit() {}
  /*
    r = 50;
    c = 2pi * r
    c = 50 * 2 * 3.14 = 314 = 315;
    x的值就是每次进度条增加的值, stroke-dasharray="0, 315"有两个参数，第一个就是进度，后面是总量。
    计算进度比例：this.start / 315
  */
  // 改变精度的函数
  getColorRedFun(x: number) {
    // 判断如果进度条走完了就不需要再执行函数了
    if (this.start > 2 * 3.14 * this.cr) {
      return false;
    } else {
      this.start += x;
      console.log(this.colorRed);
      this.colorRed.nativeElement.attributes[3].value =
        this.start + "," + "315";
      console.log(this.start, "进度");
    }
  }
}

circle.component.scss

page-circle {
  .demo2 {
    transform-origin: 52px 52px;
    transform: rotate(-90deg);
    transition: stroke-dasharray 0.3s ease-in;
  }
}

父组件中使用

home.html

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

<ion-content padding>
  <!-- 创建标记 #circleComponent -->
  <page-circle #circleComponent [cx]="pcx" [cy]="pcy" [cr]="pcr" [cb]="pcb" [start]="pstart"></page-circle>
  <div (click)="clickFun()">
    本界面获取子组件的方法
  </div>
</ion-content>

home.ts

import { Component, ViewChild } from "@angular/core";
import { NavController } from "ionic-angular";
import { CircleComponent } from "../common/circle/circle.component";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  @ViewChild("circleComponent")
  circleComponent: CircleComponent;
  // 初始化环形进度条参数
  pcx: number;
  pcy: number;
  pcr: number;
  pcb: number;
  pstart: number;
  constructor(public navCtrl: NavController) {
    this.pcx = 52;
    this.pcy = 52;
    this.pcr = 50;
    this.pcb = 2;
    this.pstart = 0;
  }

  clickFun() {
    console.log(this.circleComponent);
    this.circleComponent.getColorRedFun(4);
  }
}