Angular 6使用takeUntil防止組件中的多個Observable內存泄漏

Question

我正在從此站點跟蹤第二個示例： 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();

    }
}

Answer 1

根據該示例，答案是否定的。 您將對所有可觀察對象使用相同的取消訂閱信號，如下所示：

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

    }
}

訂閱管理的簡單統一方法，不會增加管道中的額外步驟，不會污染您的可觀察對象。