Angular Http Interceptor不会在嵌套的Observables上触发

Question

我有一个HttpInterceptor将我的Bearer标记添加到我的WebApi的所有调用。这个拦截器完全适用于我所有简单的服务调用。

但我有一个地方需要调用2个方法并使用两个结果来构建组合模型。我已经使用MergeMap，ForkJoin和FlatMap来嵌套observables，但这些似乎都没有触发我的HttpInterceptor ......

这是拦截器

export class JwtInterceptor implements HttpInterceptor {

    constructor(private userService: UserService) { }

    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.userService.getCurrentUser();
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }
}

服务电话

public getPriceList(): Observable<CuttingGapPartPrice[]> {
    const list = sessionStorage.getItem(this.listSessionKey);
    if (list) {
        return of(JSON.parse(list) as CuttingGapPartPrice[]);
    }

    return super.getClient()
        .get(`/api/cutting-gap-part-prices`, { headers: super.getHeaders() })
        .pipe(map(response => {
            sessionStorage.setItem(this.listSessionKey, JSON.stringify(response));
            return response ? response as CuttingGapPartPrice[] : new Array<CuttingGapPartPrice>();
        }));
}

public getPowerList(): Observable<MotorPower[]> {
    const list = sessionStorage.getItem(this.listSessionKey);
    if (list) {
        return of(JSON.parse(list) as MotorPower[]);
    }

    return super.getClient()
        .get(`/api/motor-power`, { headers: super.getHeaders() })
        .pipe(map(response => {
            sessionStorage.setItem(this.listSessionKey, JSON.stringify(response));
            return response ? response as MotorPower[] : new Array<MotorPower>();
        }));
}

他们个人工作完美。但是他们没有组合/嵌套。

使用MergeMap嵌套调用

public getQuotationPrices(quotation: Quotation): Observable<QuotationPrices> {
    return this.cuttingGapPartPriceService.getPriceList().pipe(mergeMap(prices => {
        return this.motorPowerService.getPowerList().pipe(map(powers => {
            var result = new QuotationPrices();
            //Some custom logic

            return result;
        }));
    }));
}

我知道我的问题与这个post中描述的问题相当，但我只是不明白我是如何解决它的。

编辑 - 使用ForkJoin的嵌套调用

public getQuotationPrices(quotation: Quotation): Observable<QuotationPrices> {
    return forkJoin([this.cuttingGapPartPriceService.getPriceList(), this.motorPowerService.getPowerList()]).pipe(map(data => {
        const prices = data[0];
        const powers = data[1];
        var result = new QuotationPrices();


        return result;
    }));
}

在chrome 的网络选项卡中的结果

Answer 1

尝试展平嵌套的observable。可能是你的内部observable没有被订阅（Observables不会运行，除非他们订阅）。您可以检查this stackblitz example以查看嵌套的observable如何不运行，除非您订阅了innerObservables或展平它们。同样如@JB Nizet所建议的那样，如果你能在stackblitz上创建一个repo，真的会很棒

Answer 2

终于找到了问题所在。它与可观测量无关。我在AppModule中提供了拦截器，但是我的SharedModule再次覆盖了这些拦截器，因为我再次导入了角度的HTTPClientModule。删除重复导入后问题已得到解决。