Angular Material 7 – 进度条

在Angular项目中，进度条可以为用户提供很好的反馈。Angular Material提供了一个非常强大的进度条组件。在本文中，我将向您介绍如何使用Angular Material的进度条组件。

什么是Angular Material进度条？

Angular Material进度条是一个可视化组件，可用于显示一个任务到达完成状态的进度。它提供了一些不同的选项，可以自定义进度条的颜色、高度、动画效果和进度百分比。

在Angular Material 7中，我们可以使用mat-progress-bar组件来创建进度条。

如何在Angular项目中使用进度条？

使用Angular Material 7中的进度条非常简单。首先，我们需要安装Angular Material和Angular CDK库。可以使用以下命令进行安装：

ng add @angular/material

在这个命令之后，我们需要将进度条组件导入到我们的模块中。在app.module.ts中，添加以下代码：

import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  ...
  imports: [MatProgressBarModule],
  ...
})
export class AppModule { }

现在，我们已经成功地将Angular Material进度条组件导入到了我们的Angular项目中。

使用mat-progress-bar组件

最简单的使用mat-progress-bar组件的方法是使用以下代码：

<mat-progress-bar mode="determinate" value="50"></mat-progress-bar>

这将创建一个宽度为50%的固定进度条。模式为’ determinate’，表示进度条的状态只能为百分比，它的值从0到100。

如果您希望创建一个动态进度条，则可以使用以下代码：

<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>

在这里，我们将value属性绑定到一个名为progress的变量。每当我们的进度改变时，进度条也会自动更新。

在进度条上添加标签：

<mat-progress-bar mode="determinate" [value]="progress" aria-labelledby="progress-bar-label"></mat-progress-bar>
<div id="progress-bar-label">{{progress}}%</div>

在这里，我们添加了一个div，它的id为progress-bar-label。这个div可以放置我们的标签信息。然后，将aria-labelledby属性设置为这个div的id，我们就成功地将标签添加到了进度条上。

要创建indeterminate模式的进度条，可以使用以下代码：

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

自定义进度条

我们可以自定义进度条组件的颜色、高度和动画效果。可以使用以下代码来实现：

<mat-progress-bar 
  mode="determinate" 
  [value]="progress" 
  color="primary" 
  strokeWidth="10" 
  class="example-margin"
></mat-progress-bar>

在这里，我们为进度条组件添加了color属性，值为’ primary’，表示进度条的主题颜色。我们还添加了strokeWidth属性，值为10，表示进度条的高度为10px。class属性为example-margin将给进度条增加一个边距。

进度条示例：

您可以使用以下代码进行参考：

<mat-progress-bar mode="determinate" [value]="progress" color="primary" strokeWidth="10" class="example-margin"></mat-progress-bar>
<div class="example-container">
  <button (click)="increase()">增加进度</button>
  <button (click)="decrease()">减少进度</button>
  <div id="progress-bar-label">{{progress}}%</div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  progress = 50;

  increase() {
    this.progress += 10;
  }

  decrease() {
    this.progress -= 10;
 }

  ngOnInit() {
    setInterval(() => {
      if (this.progress < 100) {
        this.progress += 1;
      } else {
        this.progress = 0;
      }
    }, 50);
  }
}