angular - Angular 6使用takeUntil防止组件中的多个Observable内存泄漏
问题描述
我正在关注此站点的第二个示例: https ://www.agiratech.com/how-to-prevent-memory-leaks-in-angular-observables/
我想知道我是否在一个组件中有多个 Observable,我是否需要创建对 Subject 对象的那么多引用。我使用了 unsubscribe 和 unsubscribe1 变量。我应该以不同的方法重新使用取消订阅,还是每次订阅时都创建新的主题实例?在这两种情况下,代码都没有抛出错误。
这是我的代码:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ProjDetailsService } from '../../services/proj-details.service';
@Component({
selector: 'app-proj-details',
templateUrl: './proj-details.component.html',
styleUrls: ['./proj-details.component.scss']
})
export class ProjDetailsComponent implements OnInit {
private unsubscribe = new Subject();
private unsubscribe1 = new Subject();//is this required?
constructor(public _projDetailsService: ProjDetailsService
) {
}
ngOnInit() {
this.LoadApprovalManager();
this.LoadActiveProjectSubmissions();
}
public LoadApprovalManager() {
this._projDetailsService.GetDefaultMgrGeidData()
.pipe(takeUntil(this.unsubscribe))
.subscribe(result => {
}, error => {
//this.ErrorMessage('Unable to load search data ' + error.toString());
//this.SelectedApproverManager = '';
});
}
LoadActiveProjectSubmissions() {
this._projDetailsService.GetActiveProjectSubmissions()
.pipe(takeUntil(this.unsubscribe1))
.subscribe(x => {
//processing
}, error => {
// this.ErrorMessage(error.toString());
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
this.unsubscribe1.next();
this.unsubscribe1.complete();
}
}
解决方案
按照那个例子,答案是否定的。您将对所有可观察对象使用相同的取消订阅信号,如下所示:
export class ProjDetailsComponent implements OnInit {
private unsubscribe = new Subject();
constructor(public _projDetailsService: ProjDetailsService
) {
}
ngOnInit() {
this.LoadApprovalManager();
this.LoadActiveProjectSubmissions();
}
public LoadApprovalManager() {
this._projDetailsService.GetDefaultMgrGeidData()
.pipe(takeUntil(this.unsubscribe))
.subscribe(result => {
}, error => {
//this.ErrorMessage('Unable to load search data ' + error.toString());
//this.SelectedApproverManager = '';
});
}
LoadActiveProjectSubmissions() {
this._projDetailsService.GetActiveProjectSubmissions()
.pipe(takeUntil(this.unsubscribe))
.subscribe(x => {
//processing
}, error => {
// this.ErrorMessage(error.toString());
});
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
然而,对那个网站的人表示应有的尊重,我认为这种方法没有任何意义,并且当你可以这样做时,样板代码会增加到荒谬的水平:
export class ProjDetailsComponent implements OnInit {
private subs: Subscription[] = [];
constructor(public _projDetailsService: ProjDetailsService
) {
}
ngOnInit() {
this.LoadApprovalManager();
this.LoadActiveProjectSubmissions();
}
public LoadApprovalManager() {
this.subs.push(this._projDetailsService.GetDefaultMgrGeidData()
.subscribe(result => {
}, error => {
//this.ErrorMessage('Unable to load search data ' + error.toString());
//this.SelectedApproverManager = '';
}));
}
LoadActiveProjectSubmissions() {
this.subs.push(this._projDetailsService.GetActiveProjectSubmissions()
.subscribe(x => {
//processing
}, error => {
// this.ErrorMessage(error.toString());
}));
}
ngOnDestroy() {
this.subs.forEach(s => s.unsubscribe());
}
}
订阅管理的简单统一方法,不会通过管道中的额外步骤污染您的 observables。
推荐阅读
- android - Play 商店内部测试轨道,切换到直播
- javascript - 从Javascript中的新类内部回调中获取值
- codesandbox - 如何在codesandbox中为react+typescript+mobx添加装饰器支持?
- python - Pyreverse:生成 uml 报告时如何为方法和属性添加返回类型?
- javascript - 为什么 .toISOString() 给出不同的时间?
- android - 你如何 adb 到 bluestacks 4?
- c# - 有什么方法可以发送 IEnumerable
通过 WebClient 作为参数? - go - 如何将我的 2d 字符串片段类型转换为 []byte?
- git - 跳过(完整)暂存区并直接提交文件或补丁?
- spring-boot - 远程连接到 PCF 云配置服务器服务