使用来自 angular HttpInterceptor 的服务

Question

我正在尝试使用来自 HttpInterceptor 的单例服务，以便有一个自动忙加载指示器。

然而，问题是拦截器在没有服务的情况下工作，但不使用服务。

我在 HttpInterceptor 的构造函数中引用了如下服务：

constructor(private htbs: HttpBusyService) {}

在应用程序模块中，服务和 HttpInterceptor 是这样提供的：

providers: [
    HttpBusyService,
    { provide: LocationStrategy, useClass: HashLocationStrategy},
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    MessageService,
    ConfirmationService,
]

我得到的错误是：

Uncaught Error: Can't resolve all parameters for AuthInterceptor: (?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15664)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15499)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15479)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15839)
    at eval (compiler.js:15750)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15710)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15278)
    at JitCompiler._loadModules (compiler.js:34226)

我不知道去哪里找。我显然做错了什么，因为我看到其他拦截器使用单例。我正在使用 angular 5.1.0-rc.1 但 5.0.0 有同样的问题

非常感谢任何帮助

一月

PS1我看过？但答案没有帮助
PS2 我尝试重新排列供应商

编辑：拦截器

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent,     HttpEventType, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { HttpBusyService } from './http-busy.service';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/Observable';
import 'rxjs/add/observable/throw';

export class AuthInterceptor implements HttpInterceptor {

  constructor(private htbs: HttpBusyService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<HttpEventType.Response>> {
  // this.htbs.start();
const authReq = req.clone({
  setHeaders: { 'X-AUTH-TOKEN': sessionStorage.getItem('token') }
});
return next
.handle(authReq)
.do((ev: HttpEvent<any>) => {
  if (ev instanceof HttpResponse) {
    console.log('processing response', ev);
  }
})
.catch(response => {
  // if (response instanceof HttpErrorResponse) {
    console.log('Processing http error', response);
  // }

  return Observable.throw(response);
});
  }
}

繁忙的服务：

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

@Injectable()
export class HttpBusyService {
  public busy = false;
  private count = 0;
  constructor() { }
  public start() {
    this.count++;
    this.busy = true;
  }
  public finish() {
    this.count--;
    if (this.count <= 0) {
      this.count = 0;
      this.busy = false;
    }
  }
}

Answer 1

您忘记使用 @Injectable() Decorator 表示 AuthInterceptor 是可注入元素。

Angular Dependency Injection works like this. You should define any "injectable" component using @Injectable and register in @Component provider. To increase the understanding you chould read this.

最后，以我的拙见，有时 Angular 及其相关调用堆栈中的错误有点难以理解，而且它们很小 eloquent

使用来自 angular HttpInterceptor 的服务

Usage of a service from angular HttpInterceptor

singleton

angular-http-interceptors

angular