Question

我正在尝试将服务注入HttpInterceptor，这是简单的服务

import { Injectable } from '@angular/core';
@Injectable()
export class LoginLoadingService {
   constructor() { }
   public loaded: boolean;
   isLoaded() {
       if (this.loaded === undefined) {
             this.loaded = true;
       }
       return this.loaded;
  }    
}

和拦截器

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from 
'@angular/common/http';
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { LoginLoadingService } from './loading.service';
import 'rxjs/add/operator/do';
@Injectable()
export class LoginLoadingInterceptor implements HttpInterceptor {
  constructor(public loginLoadingService: LoginLoadingService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loginLoadingService.loaded = false
    return next.handle(req).do((event: HttpEvent<any>) => {
      this.loginLoadingService.loaded = true;
    }, error => console.error(error));
  }
}

在我的app.module

中

providers: [
  LoginLoadingService,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: LoginLoadingInterceptor,
    multi: true
  }
]

HttpInterceptor正常运行，但是在intercept（）方法中没有定义loginLoadingService。我试图在app.module中向deceptor添加deps，但这给了我这个错误

params.map不是函数

不确定这里的问题是什么

Answer 1

定义拦截器的依赖关系，如下所示：

例如我们有AuthInterceptor，我们已注入LocalStorageService和SessionStorageService。

在app.module.ts中的

我们添加了拦截器AuthInterceptor：

   {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true,
        deps: [LocalStorageService, SessionStorageService]
    },

这样可行。

Answer 2

@Hadi提供的答案是正确的。我将对此加以补充。本文详细说明了在应用模块中使用 deps 的原因。 https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html#new-staticinjector-apis

较新版本的Angular使用StaticInjector，Angular的DI框架开始发挥作用。我们基本上要求Angular在需要时通过将它们作为 providers 注入到app.module中来向我们提供服务的单例实例。

这不过是 {provide：token_name，useClass：class_name}

的简写版本

因此，我们要求angular使用上述代码注入类型（类）的令牌。现在，如果我们需要将令牌与现有的服务依赖项一起注入，那么我们就要求这样注入令牌

{提供：令牌名称，useClass：类名称，部门：[deps名称]}

这就是为什么，下面将解决拦截器的静态注入

{ 提供：HTTP_INTERCEPTORS， useClass：AuthInterceptor，多：是的，部门：[LocalStorageService，SessionStorageService] }，

HttpInterceptor中的注入服务未初始化

2 个答案: