각도 HttpInterceptor에서 서비스 사용

Question

자동 사용로드 표시기를 사용하기 위해 HttpInterceptor에서 싱글 톤 서비스를 사용하려고합니다.

그러나 문제는 인터셉터가 서비스없이 작동하지만 서비스를 사용하지 않는 것입니다. 서비스와 HttpInterceptor는 다음과 같이 제공되는 응용 프로그램 모듈에서

constructor(private htbs: HttpBusyService) {} 

:

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

내가하고있는 동안 오류가 HttpInterceptor의 생성자에서 다음과 같이

나는 서비스를 참조하고 점점 :

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) 

나는 어디에서 볼 것인지 모른다. 내가 틀린 일을하고있는 것은 명백합니다. 왜냐하면 싱글 톤을 사용하는 다른 인터셉터를 보았 기 때문입니다. 나는 각 5.1.0-rc.1를 사용하고 있지만, 5.0.0은 어떤 도움이 많이

월 내가 Angular HTTP Interceptor that uses a Service을 보았다

PS1

을 감사

같은 문제

했다? 인터셉터

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

당신은 AuthInterceptor을 나타 내기 위해 @Injectable() Decorator를 사용 잊었지만 대답은 내가 공급자에게

편집을 정리 시도
PS2 도움이되지 않습니다 주사 가능한 요소입니다.

Angular Dependency Injection은 이와 같이 작동합니다. @Injectable을 사용하여 "주사 가능한"구성 요소를 정의하고 @Component 제공자에 등록해야합니다. 이해를 높이려면 this을 읽어야합니다.

마지막으로, 내 소견으로, 때로는 각도 및 관련 호출 스택에서 오류가 조금 이해하기가 까다 롭 그들이 당신의 인터셉터 및 서비스의 전체 구현 코드를 입력하십시오