停止页面加载器消失，直到所有角度部分都完成加载答案

【问题标题】：Stop page loader from dissappearing until all the angular sections have finished loading停止页面加载器消失，直到所有角度部分都完成加载
【发布时间】：2017-10-12 09:49:33
【问题描述】：

我有一个页面，其中有 2 个角部分，其中一个在另一个触发页面加载器消失之前加载，并且您只剩下一个部分加载和另一个部分卸载了几秒钟，我如何停止页面加载器从消失直到所有角度部分都已加载？

脚本：

 <script>
    loading_screen.finish();
 </script>

【问题讨论】：

能否请您提供一些部分代码，以及您为解决此问题所做的任何尝试？
你应该为此编写一个拦截器
@mrtig 我试过 //function loadFinish() { // loading_screen.finish(); //} // window.addEventListener("load", function (event) { // $('.pg-loading-screen') // .fadeOut('slow'); // }); //window.onload = function () { // loadFinish(); //示例函数调用。 //}
@pixelbits 拦截器是如何工作的？

标签： angular

【解决方案1】：

您可以为此使用 HTTP 拦截器。 HTTP 拦截器作为中间件组件工作，您可以在每次发出请求时挂钩。这个想法是，您将在发出请求时增加一个计数器，并在请求完成（成功或失败）时减少它。

当计数器为 0 时，不显示加载器。当计数器大于 0 时，显示一个加载器。

对于加载器组件本身，您可以编写一个服务来监听计数器的变化，并使用数据绑定在正确的时间显示微调器。

request.interceptor.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

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

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

import { HttpClientModule } from "@angular/common/http";
...
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [SpinnerComponent],
  exports: [],
  providers: [
    HttpMonitor,
    {
       provide: HTTP_INTERCEPTORS,
       useClass: RequestHttpInterceptor,
       multi: true,
    }, 
  ],
  bootstrap: [AppComponent]

})
export class AppModule {
}

【讨论】：