Question

我想以角度显示每个服务调用的加载程序。我正在使用ngx-loading。

我尝试了下面的代码，但它只适用于路由更改，而不是让它解决问题。

import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading';
<router-outlet (activate)="onActivate($event)"></router-outlet>
<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

public loading = false;

onActivate(e) {
   this.loading = true;
}

Answer 1

有两种选择，

您可以使用 HTTP拦截器拦截http请求，而无需在请求开始和结束时修改和更新加载器的状态。

这是一个基本的拦截器，只是让请求通过而不做任何修改。

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Do your stuff here
    return next.handle(req);
  }
}

要在模块中提供拦截器，请将其添加到providers阵列：

{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },

注意：您可能需要在拦截器中注入一个自定义服务，以便将加载器的状态传递给使用它的组件。

更多信息https://angular.io/guide/http#intercepting-requests-and-responses

或者对所有HTTP请求使用共享服务，并在请求开始时使一些变量值为true，这将绑定到您的加载器并在完成请求后将其设为false将隐藏您的加载程序来自DOM。

例如

httpCall() {
this.loading = true;
return this.http.post(url, data, { headers: headers })
  .do(data=> {this.loading = false;},
  err=> {this.loading = false;);
}

<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

如何在角度

1 个答案: