HttpInterceptorは他の観測値からの値に基づいて応答ボディを変更します

Question

いくつかの方法では、レスポンスボディを、他の観測値からの値に基づいて変更できないようです。

リクエストを変更するのは簡単ですが、私はレスポンスをどのように行うのか分かりません。

@Injectable() 
export class MyHttpInterceptor implements HttpInterceptor { 
    constructor(private _injector: Injector) { 
    } 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(request).map((event: HttpEvent<any>) => { 
     if (!(event instanceof HttpResponse)) return event;    

     const translateService = this._injector.get(TranslateService); 

     // retrieved the key from the reponse, now need to retrieve data from the translateservice 
     translateService.get(`${event.body.key}`).subscribe((value: string) => { 
     event.body.message = value; 
     }); 

     // how to return new response ?? 
     return event.clone({ body: event.body }); 
    }); 
    } 
} 

私は基本的に新しいプロパティの 'message'を持つ新しい応答体を返したいと思います。

Answer 1

インターセプトが戻って観測できるので、翻訳サービスのgetEventにswitchMapできます。 Like So

Answer 2

レスポンスボディを直接変更することはできませんので、クローンを返す必要があります。最終的な答えは下記を参照してください。

@Injectable() 
export class MyHttpInterceptor implements HttpInterceptor { 
    constructor(private _injector: Injector) { 
    } 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const translateService = this._injector.get(TranslateService); 

    return next.handle(request) 
     // filter out only events that HTTP event. 
     .filter((event: HttpEvent<any>) =>(event instanceof HttpResponse)) 
     //then switch the observable to get the response of the translate service. 
     .switchMap(event => translateService.get(`${event.body.key}`) 
      .map(value => event.clone({ body: { message:value } })); 
    }); 
    } 
}