как отписаться от функции в конструкторе angular 9

Question

Я хочу знать, как отписаться от этой подписки?

inventory.component.ts

constructor(
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService
) {
    this.inventoryFilterService.listen().subscribe(() => {
        this.checkState();
    });
}

Моя проблема в том, что когда я покидаю компонент там, где я нуждался в этой услуге и повторно вводил ее (компонент), каждый щелчок мышью в моем компоненте заголовка (где находится кнопка фильтра) запускается дважды. Я думаю, это происходит потому, что я не отписался от подписки на услугу, но я также не могу понять, как это сделать.

inventory-filter.service.ts

@Injectable({
    providedIn: 'root',
})
export class InventoryFilterService {
    constructor() { }

    private _listners = new Subject<any>();

    listen(): Observable<any> {
        return this._listners.asObservable();
    }

    filter() {
        this._listners.next();
    }
}

header-inventory.component.ts

import { Component, OnInit, Output } from '@angular/core';
import { UserRightsService } from 'src/app/services/user/user-rights.service';
import { EventEmitter } from 'events';
import { InventoryFilterService } from 'src/app/services/inventory/inventory-filter.service';

@Component({
    selector: 'app-header-inventory',
    templateUrl: './header-inventory.component.html',
    styleUrls: ['./header-inventory.component.css'],
    providers: [UserRightsService],
})
export class HeaderInventoryComponent implements OnInit {
    @Output() onFilter: EventEmitter = new EventEmitter();

    canAddInventoryItem: Boolean;
    internalOnly: Boolean;

    constructor(
        private userRightsService: UserRightsService,
        private inventoryFilterService: InventoryFilterService,
    ) { }

    ngOnInit() {

    }

    showInternalTerminals(): void {
        this.inventoryFilterService.filter();
        if (localStorage.getItem('onlyInternal') === 'false') {
            this.internalOnly = true;
        } else {
            this.internalOnly = false;
        }
    }
}

inventory.component.ts

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { TerminalService } from 'src/app/services/terminal/terminal.service';
import { Router } from '@angular/router';
import { InventoryFilterService } from 'src/app/services/inventory/inventory-filter.service';

@Component({
    selector: 'app-inventory',
    templateUrl: './inventory.component.html',
    styleUrls: ['./inventory.component.css'],
})
export class InventoryComponent implements OnInit {

    constructor(
        private terminalService: TerminalService,
        private router: Router,
        private inventoryFilterService: InventoryFilterService
    ) {
        this.inventoryFilterService.listen().subscribe(() => {
            this.checkState();
        });
    }
....

Answer 1

Назначить подписку переменной Subscription. Позже он может быть использован для отмены подписки.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class AppComponent implements OnInit, OnDestroy {
  private listenSubscription: Subscription;

  constructor (
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService) {

    this.listenSubscription = this.inventoryFilterService.listen().subscribe(() => {
      this.checkState();
    });
  }

  ngOnInit() { }

  ngOnDestroy() {
    if(this.listenSubscription) {
      this.listenSubscription.unsubscribe();
    }
  }
}

Answer 2

Вы можете назначить подписку переменной, а затем использовать ловушку жизненного цикла ngOnDestroy для очистки при уничтожении компонента.

private subscription: Subscription;


constructor(
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService
) {
    this.subscription = this.inventoryFilterService.listen().subscribe(() => {
        this.checkState();
    });
}

onDestroy() {
    this.subscription.unsubscribe();
}