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

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

circle.component.html

子界面中增加进度
 
 

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 * rc = 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

Home
 
本界面获取子组件的方法
 
 

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);}
 }