web-dev-qa-db-ja.com

HttpInterceptorに挿入されたサービスが初期化されていません

私は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は正常に起動していますが、loginLoadingServiceがintercept（）メソッドで定義されていません。 app.moduleのインターセプターにdepを追加しようとしましたが、このエラーが発生しました

params.mapは関数ではありません

ここで問題が何であるかわからない

angularangular-http-interceptors
8
Isaac Levin

以下のようなインターセプターの依存関係を定義します。

たとえば、AuthInterceptorとLocalStorageServiceとSessionStorageServiceを注入しました。

app.module.tsにインターセプターAuthInterceptorを追加します。

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

これは動作します。

27
Hadi Rasouli

@Hadiが提供する答えは正しいものです。これに追加すると思います。アプリモジュールでdepsを使用する理由については、この記事で詳しく説明します。 https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html#new-staticinjector-apis

Angularの新しいバージョンでは、angularのDIフレームワークが機能するStaticInjectorを使用しています。基本的にAngular app.moduleでprovidersとして挿入するだけで、必要なときにサービスのシングルトンインスタンスを提供します。

これは{provide：token_name、useClass：class_name}の短縮形にすぎません

したがって、上記のコードを使用してタイプ（クラス）のトークンを注入するためにangularを要求しています。ここで、既存のサービス依存関係でトークンを注入する必要がある場合は、次のようにトークンを注入するように要求します。この

{提供：token_name、useClass：class_name、deps：[deps_name]}

そしてそれが理由で、以下はインターセプターの静的注入に解決されます

{提供：HTTP_INTERCEPTORS、useClass：AuthInterceptor、multi：true、deps：[LocalStorageService、SessionStorageService]}、

2
Joey587