Angular 6 Предотвращение утечек памяти из нескольких наблюдаемых в компоненте с использованием takeUntil

Question

Я следую 2-му примеру с этого сайта: https://www.agiratech.com/how-to-prevent-memory-leaks-in-angular-observables/

Я хотел бы знать, если у меня есть несколько Observables в компоненте, нужно ли мне создавать столько ссылок на объект 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());

    }
}

простой унифицированный подход к управлению подписками, который не загрязняет ваши наблюдаемые дополнительными шагами в конвейере.