Question

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

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

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

我知道还有其他库（例如ngx）正在使用此库，但我想尽可能使用Angular Material库。

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

Answer 1

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

有用于此目的的软件包，例如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>

Answer 2

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

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

使用角材料进度条加载页面

2 个答案: