Primeng Progressbar教程| p-progressbar示例

在这篇博文中，我们将通过实例来学习Primeng Angular Progressbar的教程。

Primeng是一个丰富的UI库，用于提供Angular框架的丰富UI组件。它提供了进度条UI组件。

Angular进度条组件实例

progressbar 是一个UI组件，用于指示一个事件或行动的渐进状态。

这将显示给用户关于在上传文件到服务器时的状态。这将给用户提供文件上传的状态。

Primeng提供Horizontal 一个动作的进度状态。它在以下操作中向用户提供进度状态。

• 文件上传状态
• 后台数据库处理
• REST API操作

这将对用户体验有很大帮助

.首先，我们需要使用Angular CLI工具创建一个Angular应用程序，接下来是在你的应用程序中安装和配置它。

你可以查看以下关于创建和安装应用程序的文章。

这篇文章不会谈论创建一个应用程序并将Primeng框架安装到Angular应用程序中。

下面的代码适用于Angular 10/Angular 11/Angular 12版本。最好是最新的Primeng版本。

这些框架以angular模块的形式提供每一个组件。

要使用这个组件，在应用模块中导入ProgressBarModule 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ProgressBarModule} from 'primeng/progressbar';
import {GrowlModule} from 'primeng/growl';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressBarModule, // Progress Bar support
    GrowlModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

静态进度条

在这里，进度条的值是固定的。它将显示进度条的总状态的一些百分比。

<p-progressBar [value]="90"></p-progressBar>

你可以看到下面的输出

动态进度条

进度条的状态是动态变化的。例如，每100毫秒发出1-100的数值。使用rxjs区间操作生成定时器 使用rxjs操作符从1到100发出数值**。**发出的数值被订阅并绑定到进度条上。

app.component.ts

import { Component, OnInit } from '@angular/core';
import {Message, MessageService} from 'primeng/api';
import { interval, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  outputMsg: Message[];

  statusNum: number = 0;
  subscription$: Subscription;

  constructor(){
  }
  ngOnInit() {
    const interval$ = interval(10);
    const timer = interval$.pipe(take(100));
    this.subscription$ = timer.subscribe(
      val =>{this.statusNum = val + 1;
      console.log(this.statusNum)},
      () => { },
      () => this.outputMsg = [{severity: 'success', summary: 'Success', detail: 'Tasks Done'}]);

}
}

Html模板变化

 <div style="text-align:center">
   <h1>
    Primeng Angular ProgressBar Component Example
</h1>
</div>
<p-growl [value]="outputMsg"></p-growl>

<div style="text-align:center">
    <p-progressBar [value]="statusNum"></p-progressBar>
</div>

并且输出为

不确定的进度条

我们可以配置两种类型的进度条模式。模式：-indeterminate 或determinate

不确定这将连续显示一个操作的进度条，即不确定的时间。例如，从Excel向数据库加载一条缺乏的记录。它连续显示状态条，直到数据完全加载完毕。一旦数据加载完毕，它将不显示状态栏。

确定这显示了在总操作状态下的估计状态。例如，两个人加载一个缺乏的记录，如果加载了10000条记录，它会向最终用户显示10%的状态。它将显示状态，直到它达到100%。

<p-progressBar mode="indeterminate" [style]="{'height': '20px'}"></p-progressBar>

输出是

结语

总结一下，你学到了如何在angular应用程序中整合进度条，静态和动态条的例子，进度条的确定和不确定的模式。