Question

我已经制作了一些显示列表的功能。当我尝试将大数据传递给变量时，加载需要太多时间。对于我的情况，displayChapterList(chapterLessonData,scode_id,colourCode) { //.. some codes //Very big data need to be pass to data_chapters this.data_chapters = chapterLessonData; // Very large data set_alarmed("Done!"); } set_alarmed(msg) { alert(msg); }变量导致我的应用程序性能变慢。

如何实现诸如准备加载微调器（等待填充变量）之类的内容，以便在用户完成之前通知用户？

{{1}}

Answer 1

您可以利用HTTP拦截器。发出任何请求时，请递增请求计数。当请求完成（或错误）时，请求计数减少。当待处理请求的数量>时，使用ngIf显示微调器组件。 0

<强> RequestHttpInterceptor.ts

import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { HttpHandler, HttpEvent } from "@angular/common/http";

import 'rxjs/add/operator/finally'

import { HttpMonitor } from "../request-spinner/http.monitor";

export class RequestHttpInterceptor implements HttpInterceptor {
    constructor(private httpMonitor: HttpMonitor){

    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       this.httpMonitor.addRequest();
        return next.handle(req).finally(() => {
            this.httpMonitor.removeRequest();
        })

    }
}

<强> http.monitor.ts

HttpMonitor是一种跟踪待处理请求的服务。每当请求递增或递减时，都会发出一个事件。

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export class HttpMonitor {
    public pendingRequestNumber: number;
    public pendingRequests:Observable<number>;
    private prSubject: BehaviorSubject<number>;

    constructor() {
        this.prSubject = new BehaviorSubject<number>(0);
        this.pendingRequests = this.prSubject.asObservable();
        this.pendingRequestNumber = 0;
    }

    addRequest() {
        this.prSubject.next(++this.pendingRequestNumber)
    }
    removeRequest() {
        this.prSubject.next(--this.pendingRequestNumber)
    }
}

<强> spinner.component.ts

创建一个spinner组件，用于侦听来自HttpMonitor：

的待处理请求事件

import { Component } from "@angular/core";
import { HttpMonitor } from './http.monitor';

@Component({
    selector: '[spinner]',
    template: `
        <img *ngIf="httpMonitor.pendingRequestNumber >0" src="http://www.silkron.co.uk/images/spinner.gif" />
    `,
    styles: [
        `
            img {
                width: 20px;
                height: 20px;
            }
        `
    ]
})
export class SpinnerComponent {
    constructor(public httpMonitor:HttpMonitor){

    }

}

<强> app.module.ts

使用AppModule注册服务（微调器可能应该进入共享模块）。这里，service和spinner组件位于同一个模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpMonitor } from "./request-spinner/http.monitor";
import { SpinnerComponent } from "./request-spinner/spinner.component";
import {HTTP_INTERCEPTORS} from '@angular/common/http';
import { RequestHttpInterceptor } from "./interceptors/request.interceptor";

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent, SpinnerComponent],
  exports: [AppComponent],
  providers: [
    HttpMonitor,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestHttpInterceptor,
      multi: true,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

将微调器放在您希望在其中一个组件模板中显示的位置：

<span spinner></span>

Answer 2

你可以在你的html组件中添加svg loader：

<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>

在你的ts控制器中定义一个var：

  loading = false;

当你开始你的功能时：

this.loading = true;

之后：

this.loading = false;

Answer 3

我正在成功使用以下解决方案来处理我的角度2应用程序。将以下html添加到index.html的body标记内

<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>

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

隐藏它

编写服务以显示和隐藏预加载器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();

准备装载微调器等待变量填满

3 个答案: