Angular 6 使用takeUntil防止组件中多个Observable内存泄漏
Angular 6 Prevent memory leaks multiple Observable in a component using takeUntil
我正在关注此站点的第二个示例:
https://www.agiratech.com/how-to-prevent-memory-leaks-in-angular-observables/
我想知道如果我在一个组件中有多个 Observable,我是否需要创建那么多对 Subject 对象的引用。我使用了 unsubscribe 和 unsubscribe1 变量。
我应该在不同的方法中重新使用取消订阅,还是在每次订阅时都创建新的 Subject 实例?在这两种情况下代码都没有抛出错误。
这是我的代码:
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());
}
}
订阅管理的简单统一方法,不会通过管道中的额外步骤污染您的可观察对象。
我正在关注此站点的第二个示例: https://www.agiratech.com/how-to-prevent-memory-leaks-in-angular-observables/
我想知道如果我在一个组件中有多个 Observable,我是否需要创建那么多对 Subject 对象的引用。我使用了 unsubscribe 和 unsubscribe1 变量。 我应该在不同的方法中重新使用取消订阅,还是在每次订阅时都创建新的 Subject 实例?在这两种情况下代码都没有抛出错误。
这是我的代码:
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());
}
}
订阅管理的简单统一方法,不会通过管道中的额外步骤污染您的可观察对象。