각도 4 - 인터셉터에서 Observable.do()에 대한 콜백이 호출되지 않습니다.

Question

요청이 진행 중일 때로드 표시기를 표시하는 솔루션을 구현하려고합니다. 찾고있는 this 솔루션에서 나는 서비스로 인터셉터를 구현했습니다. .do() 콜백이 실행되지 않기 때문에 카운터가 종료되지 않는 것을 제외하고는 모두 올바르게 작동합니다 (b은 콘솔에 인쇄되지 않습니다). 그것에 관한 어떤 생각? 요청이 완료되었는지 어떻게 알 수 있습니까?

import { Injectable } from '@angular/core'; 
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 

import { LoadingIndicatorService } from './loading-indicator.service'; 

@Injectable() 
export class LoadingIndicatorInterceptor implements HttpInterceptor { 
    constructor(private loadingIndicatorService: LoadingIndicatorService) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     this.loadingIndicatorService.requestsCount++; 

     const handleObs: Observable<HttpEvent<any>> = next.handle(req); 

     console.log('a'); 
     handleObs.do(() => { 
     console.log('b'); 
     this.loadingIndicatorService.requestsCount--; 
     }); 

     return handleObs; 
    } 
} 

Answer 1

새로운 관찰 가능 항목을 반환해야하기 때문에 do()가 실행되지 않습니다. 당신은 그것을 이렇게 할 수 있었다 :

export class LoadingIndicatorInterceptor implements HttpInterceptor { 
constructor(private loadingIndicatorService: LoadingIndicatorService) {} 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    this.loadingIndicatorService.requestsCount++; 

    const handleObs: Observable<HttpEvent<any>> = next.handle(req); 

    console.log('a'); 
    return handleObs.do(() => { 
    console.log('b'); 
    this.loadingIndicatorService.requestsCount--; 
    }); 
} 
}