如果 Observable 使用异步管道,是否需要取消订阅?

Is unsubscribe needed if an Observable uses an async pipe?

我需要确定两种不同的处理 Observable 的方法是否同样有效,或者其中一种是否会导致内存问题。

在以下示例中,foo$bar 是从服务接收值的模板变量。每个都有自己的 Observable。在该组件中,bar 从订阅中显式获得其值,随后在 OnDestroy() 中结束该订阅。然而,foo$ 并未明确订阅服务,而是在模板中使用了 async 管道。

foo$bar 是否都是显示服务数据的有效方式,或者 foo$ 是否存在问题,因为没有退订内存清理?

示例服务:

Injectable()
export class ExampleService {
    get foo$(): Observable<string> {
        return data.from.api;
    }

    get bar$: Observable<string> {
        return data.from.api;
    }
}

示例组件:

@Component({
    template: `
        <div>{{ foo$ | async }}</div>
        <div>{{ bar }}</div>
    `
})
export class ExampleComponent implements OnInit, OnDestroy {
    public foo$ = this._exampleService.foo$;
    public bar = '';
    private _destroy$ = new Subject();

    constructor(private _exampleService: ExampleService) {}

    public ngOnInit() {
        this._exampleService.bar$
            .pipe(takeUntil(this._destroy$))
            .subscribe(bar => this.bar = bar);
    }

    /**
     * Cancel subscriptions.
     */
    public ngOnDestroy() {
        this._destroy$.next(true);
        this._destroy$.complete();
    }
}

来自angular队

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

因此异步管道负责订阅和解包数据以及在组件被销毁时取消订阅。

不,异步管道订阅 Observable 或 Promise 和 returns 它发出的最新值。当发出新值时,异步管道标记要检查更改的组件。当组件被销毁时,异步管道会自动取消订阅以避免潜在的内存泄漏。