HttpInterceptor中的注入服務未初始化

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中向攔截器添加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提供的答案是正確的。我想補充一點。 本文詳細介紹了在app模塊中使用deps的原因。 https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html#new-staticinjector-apis

較新版本的Angular使用StaticInjector，其中角度的DI框架發揮作用。 我們基本上要求Angular在需要時通過在app.module中將它們作為提供者注入來為我們提供服務的單例實例。

這只是{provide：token_name，useClass：class_name}的簡寫版本

所以我們要求angular使用上面的代碼注入一個類型（類）的標記。 現在，如果我們需要使用現有服務依賴項注入令牌，那么我們要求令牌像這樣注入

{provide：token_name，useClass：class_name，deps：[deps_name]}

這就是為什么，下面解決了攔截器的靜態注入

{provide：HTTP_INTERCEPTORS，useClass：AuthInterceptor，multi：true，deps：[LocalStorageService，SessionStorageService]}，