我需要确定两种不同的处理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();
}
}
答案 0 :(得分:2)
来自角度团队
异步管道订阅Observable或Promise并返回 它发出的最新值。发出新值时,异步 管道标记要检查更改的组件。当组件 被销毁后,异步管道会自动退订以避免 潜在的内存泄漏。
因此,异步管道负责订阅和解包数据,以及在组件被破坏时取消订阅。
答案 1 :(得分:0)
否,异步管道订阅Observable或Promise并返回其发出的最新值。发出新值时,异步管道会将要检查的组件标记为更改。当组件被销毁时,异步管道将自动退订,以避免潜在的内存泄漏。