为每个 HTTP 请求创建进度条加载效果

Question

美好的一天，我们如何在 angular 4 中为每个 API 或每 1 分钟呈现一次的 HTTP 请求实现一些加载效果？像这样 https://github.com/pleerock/ngx-progress-bar ？我想使用 angular 4.

构建我自己的自定义加载效果

Answer 1

在 index.html

的正文标签内添加以下 html

<body>
  <div id="preloader" class="loader" style="display: none">
    <div class="d-flex align-items-center" style="height: 100%;">
      <div class="loader-content" title="0">
        Progress Bar Loading ....
      </div>
    </div>


  </div>
  <app-root class="">Loading...</app-root>
</body>

您可以使用任何 html 来显示您的进度条 html，而不是进度条加载文本。使用 style="display: none"

保持隐藏

写一个服务来显示和隐藏 preloader div 如下。

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

@Injectable()
export class PreloaderService {

  static showPreLoader() {
    document.getElementById('preloader').style.display = 'block';
  }
  static hidePreLoader() {
    document.getElementById('preloader').style.display = 'none';
  }

}

在您的组件中按如下方式使用它。

import { PreloaderService } from '../../../shared/services/preloader.service';

此服务有两个静态方法，用于显示和隐藏预加载器。无需将此服务作为构造函数参数来使用这些方法。

就在 HTTP 请求之前

显示

PreloaderService.showPreLoader();

得到结果后

隐藏

PreloaderService.hidePreLoader();

为每个 HTTP 请求创建进度条加载效果

Create progress bar loading effect for every HTTP request

lazy-loading

angular