时间戳

首页 > 解决方案 > 如何取消订阅嵌套的 observable

angular - 如何取消订阅嵌套的 observable

问题描述

在我们的 Angular 组件上使用 ngOnDestroy() 方法，如果在离开页面时它们仍处于挂起状态，我们将取消 http 请求。在某些页面上，我们使用自定义的通用缓存助手来防止重新加载已经加载的数据。

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AsyncSubject } from "rxjs";

@Injectable()
export class HttpCacheHelper {
    public cache = new Map<string, AsyncSubject<any>>();

    public constructor(private readonly http: HttpClient) {        

    }

    public get<T>(url: string): AsyncSubject<T> {
        if (!this.cache.has(url)) {
            const subject = new AsyncSubject<T>();
            this.cache.set(url, subject);
            this.http.get(url)
                .subscribe((data:any) => {
                    subject.next(data as T);
                    subject.complete();
                });
        }
        return this.cache.get(url);
    }
}

如果我取消订阅 AsyncSubject，我的 http 调用（当然）不会被取消。如何做到这一点？

标签： angulartypescriptrxjsobservable

解决方案

在这种情况下，您不必取消订阅 http 源（请参阅此问题）。一般来说，您可以使用 take 运算符或 flatmap 进行嵌套订阅。

推荐阅读