如何在离子3中设计圆形进度条?

时间:2017-08-17 13:03:44

标签: angular typescript ionic-framework ionic3

如何在离子3中创建循环进度条。我是离子的新手。 我已经尝试安装

npm install jquery-circle-progress

package link here

它安装完美但我很困惑如何在离子中使用它? 请指导我。谢谢你提前

更新

 import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { ProfilePage } from './profile';
 import { RoundProgressComponent } from 'angular-svg-round-progressbar'; 

       @NgModule({ 
           declarations: [ ProfilePage, ],
           imports: [IonicPageModule.forChild(ProfilePage), ], }) 

           export class ProfilePageModule {}

1 个答案:

答案 0 :(得分:10)

更新:06-11-2017

这不适用于最新版本(1.2.0)。但它与npm install angular-svg-round-progressbar@1.1.1 --save一起工作正常。

Working git repo

另一个Answer is here

旧答案:

无法使用上述 jquery进度条与Ionic。您必须使用Angular模块。

这是您可以使用的那个。

Demo

Git Repo

enter image description here

<强>步骤:

npm install angular-svg-round-progressbar --save

之后,您需要导入RoundProgressModule中的module,如下所示:

import {NgModule} from '@angular/core';
import {RoundProgressModule} from 'angular-svg-round-progressbar';

@NgModule({
  imports: [RoundProgressModule]
})
export class YourModule {};

<强>更新

import { RoundProgressComponent } from 'angular-svg-round-progressbar'; 

       @NgModule({ 
           declarations: [ ProfilePage, ],
           imports: [IonicPageModule.forChild(ProfilePage),
                     RoundProgressModule],
           }) 

           export class ProfilePageModule {}