angular4+百分比进度显示插件用法示例

本文实例讲述了angular4+百分比进度显示插件用法。分享给大家供大家参考，具体如下：

效果展示：

一、在npm社区中搜索 ：

ng-circle-progress

二、在项目目录下安装下载

npm install ng-circle-progress --save

三、在app.module.ts文件中导入NgCircleProgressModule模块，

并在@NgModule装饰器中使用NgCircleProgressModule.forRoot()的方法,里面的参数

是个对象字面量

NgCircleProgressModule.forRoot({
   radius: 100,
   outerStrokeWidth: 16,
   innerStrokeWidth: 8,
   outerStrokeColor: "#78C000",
   innerStrokeColor: "#C7E596",
   animationDuration: 300
 })

四、在app.component.html中导入标签

<circle-progress
 [percent]="85"
 [radius]="100"
 [outerStrokeWidth]="16"
 [innerStrokeWidth]="8"
 [outerStrokeColor]="'#78C000'"
 [innerStrokeColor]="'#C7E596'"
 [animation]="true"
 [animationDuration]="300"
></circle-progress>

其中参数有：

// 字幕格式回调示例
formatSubtitle = (percent: number) : string => {
 if(percent >= 100){
  return "Congratulations!"
 }else if(percent >= 50){
  return "Half"
 }else if(percent > 0){
  return "Just began"
 }else {
  return "Not started"
 }
}

或者写成以下形式

formatSubtitle (percent: number) : string {
 if(percent >= 100){
  return "Congratulations!"
 }else if(percent >= 50){
  return "Half"
 }else if(percent > 0){
  return "Just began"
 }else {
  return "Not started"
 }
}

然后再在html页面以插值表达式{{ formatSubtitle(number类型的任意值) }}的方式调用。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。