使用 Angular 材质进度条加载页面答案

【问题标题】：Using Angular Material Progress Bar For Loading of Page使用 Angular 材质进度条加载页面
【发布时间】：2019-09-21 10:27:58
【问题描述】：

我有一个 Angular 项目，我广泛使用 Angular Material library。我想使用Progress Bar Component 来显示页面何时加载或我何时进行 api 调用。例如，当我在等待 Stripe 的回复时。

启动进度条看起来很简单，只需在服务中使用全局变量来指示页面加载时。我正在考虑为此使用路由器。

但是，我想显示页面加载的实际进度。例如，当您观看 youtube 视频时。组件 api 使用 value 属性来显示进度量。但是如何获取页面加载的进度呢？

我知道还有其他库（例如 ngx）使用它，但如果可能的话，我想使用 Angular Material 库。

任何想法如何实现这一目标？

【问题讨论】：

标签： javascript angular angular-material progress-bar

【解决方案1】：

如果你看到他们的例子，他们已经给出了解决方案here

export class ProgressBarConfigurableExample {
  color = 'primary';
  mode = 'determinate';
  value = 100; // this value from 0 to 100 changes progess bar
  bufferValue = 100;
}

【讨论】：

是的，我看过那个例子。我想使用确定的形式。 但是如何将值绑定到已经加载的页面数量呢？

【解决方案2】：

为时已晚，但也许其他人需要它：

有这方面的包，例如ng2-slim-loading-bar。

但是，如果您想使用 Material Progress Bar 手动执行此操作，请查看此示例。

它确实给人一种进步的错觉，因为它会随着时间的推移而增加，并且如果它达到 95% 而负载还没有完成，那么它就会停止直到发生这种情况。不知道有没有办法计算一个请求的真实进度，那就完美了。

编辑：查看有关 Tracking and showing request progress 的 Angular 文档，这样您也许可以实现一个相当真实的进度条。

组件：

import { Component } from '@angular/core';
import {
  NavigationCancel,
  Event,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router,
} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  progressValue = 0;
  progressColor = 'primary';

  progressTimer: number;

  // This will be used to force stop (if an error occurs, or the user stops loading)
  stopProgress = false;

  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      this.navigationObserver(event);
    });
  }

  private navigationObserver(event: Event): void {
    
    if (event instanceof NavigationStart) {

      // Increase 1% every 25 milliseconds, adjust it to your preference
      this.progressTimer = setInterval(() => {
        this.loading();
      }, 25);

    }

    if (event instanceof NavigationEnd) {

      // When the navigation finishes, fill the bar completely
      this.progressValue = 100;
      
      /*
      * Uncomment this block to simulate a delay (for testing), because if you
      * are in a local environment or the request is to a 'light' or very fast resource, 
      * the progress bar will appear at 100%.
      */
      /*    
      setTimeout(() => {
        this.progressValue = 100;
      }, 2000);
      */
    }

    /* 
    * If the navigation is canceled or an error occurs, 
    * stop the progress bar and change its color.  
    */

    if (event instanceof NavigationCancel) {
      this.stopProgress = true;
      this.progressColor = 'accent';
    }

    if (event instanceof NavigationError) {
      this.stopProgress = true;
      this.progressColor = 'warn';
    }

  }

  // Function to increase the value of the progress bar    
  private loading(): void {
    /*
    * Leave 5% in case an unusual delay occurs, in the previous
    * function it is filled to 100% if the load ends successfully
    */
    if (this.progressValue >= 95 || this.stopProgress) {
      clearInterval(this.progressTimer);
    } else {
      this.progressValue++;
    }
  }
}

模板：

<mat-progress-bar [value]="progressValue" [color]="progressColor">
</mat-progress-bar>

<div *ngIf="progressValue == 100; else elseBlock">
    <h1>Loaded!</h1>    
</div>

<ng-template #elseBlock>
    <h1>Loading...</h1>
</ng-template>

【讨论】：