Служба подписки запускается несколько раз внутри ngOnInit [Angular 2]

Question

У меня проблема в том, что когда я иду на разные страницы и возвращаю банк на первую страницу, где находится этот компонент:

ngOnInit() {
  this.getModal();
}

getModal() {

this.subscription = this.sharedService.itemEdit$.subscribe((bank: any) => {
            console.log("TEST")
            this.subscription.unsubscribe();
        });
}

Я получаю несколько подписок, даже когда я вызываю службу emit только один раз.

Кто-нибудь знает в чем может быть проблема?

Answer 1

Вам нужно отписаться внутри ngOnDestroy незадолго до того, как Angular уничтожит директиву / компонент. Проверьте Angular Lifecycle hook

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

Answer 2

Альтернативой ответу ranakrunal9, который может быть полезен, если у вас несколько подписок, является установка разрушенного $-триггера и использование .takeUntil(this.destroyed$):

class SomeComponent {
    destroyed$ = new Subject();

    ngOnInit() {
        this.sharedService.itemEdit$
            .takeUntil(this.destroyed$) // this will automatically complete the stream when destroyed and therefor close the subscription
            .subscribe(...);

        this.sharedService.otherStream$
            .takeUntil(this.destroyed$)
            .subscribe(...);

        this.sharedService.streamThree$
            .takeUntil(this.destroyed$)
            .subscribe(...);
    }

    ngOnDestroy() {
        this.destroyed$.next();
    }
}

---

В качестве дополнительного примечания: старайтесь избегать ручных подписок на компоненты, компонент обычно там для отображения данных, для которых async -трубка может быть использована, которая будет обрабатывать subscribe а также unsubscribe автоматически, так что вам не придется беспокоиться обо всем этом.

Если происходит что-то вечное (например, фоновое задание), используйте сервис.