Question

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

脚本：

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

Answer 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 {
}

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

1 个答案: