Angular 6使用takeUntil防止组件中的多个Observable内存泄漏

Question

我正在关注此站点的第二个示例： 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();

    }
}

Answer 1

按照这个例子，答案是否定的。您可以对所有 observables 使用相同的取消订阅信号，如下所示：

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

    }
}

简单统一的订阅管理方法，不会通过管道中的额外步骤污染您的 observable。