javascript - 使用 Angular 材质进度条加载页面

Question

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

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

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

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

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

标签： javascriptangularangular-materialprogress-bar

Answer 1

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

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

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

它确实给人一种错误的进展错觉，因为它会随着时间的推移而增加，并且如果它在没有完成负载的情况下达到 95%，那么它会停止直到发生这种情况。我不知道是否有任何方法可以计算请求的真实进度，那将是完美的。

编辑：查看有关Tracking 和显示请求进度的 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>