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

时间:2019-05-08 03:25:58

标签: angular rxjs angular-pipe

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

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

foo$bar都是显示服务数据的有效方法,还是foo$有问题,因为没有取消订阅内存清理的工作?

ExampleService:

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

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

ExampleComponent:

@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();
    }
}

2 个答案:

答案 0 :(得分:2)

来自角度团队

  

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

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

答案 1 :(得分:0)

否,异步管道订阅Observable或Promise并返回其发出的最新值。发出新值时,异步管道会将要检查的组件标记为更改。当组件被销毁时,异步管道将自动退订,以避免潜在的内存泄漏。