Навигация по маршрутам продолжает создавать наблюдаемые для каждого ngoninit

Question

Мы пытаемся написать модальное диалоговое окно, и мы используем Rxjs для связи компонентов в угловых для реактивных событий.Ниже приведен фрагмент

 public class ModelService{
    subject = new Subject();
    raiseOk(): void {
         this.subject.next({action: 'SUBMIT ... });
    }
    onOk(): Observable<any> {
       return this.subject.asObservable().pipe(
          filter(x => x.action=='SUBMIT'),
          map(x => x));
    }    
 }

 // Our modal dialog will invoke raiseOk() event when ok is clicked.

 // Assuming ModelService registered and injected into component
 export class Component{
     ngOnInit(): void{
         this.modelService.onOk().subscribe(x=> {
              console.log('ok clicked');
         });
     }
 }

Все выглядит отлично.Однако мы обнаружили ошибку в этом.Что происходит, мы просто выяснили, когда мы переключаемся на другой маршрут и возвращаемся на этот маршрут, мы замечаем (так как ngoninit снова запускается для компонента).Создается новая наблюдаемая, а старая все еще остается.

Если мы переключаемся сейчас, у нас есть 3 наблюдаемые, если мы переключаемся сейчас, у нас есть 4 наблюдаемые.Обработчик запускает 3 раза, 4 раза и более в зависимости от переключения маршрутов.

Я в значительной степени запутался, потому что служба this.http.get() angular также имеет подписку, но она не срабатывает несколько раз, как указано выше.Мы что-то упустили?Любая помощь с благодарностью.

Answer 1

Каждый раз, когда вы уходите, ваша подписка не умирает. И каждый раз, когда вы возвращаетесь по тому же маршруту, создается новая «подписка».Убей подписку на крючке ngOnDestroy().

export class Component{
    sub: Subscription;
    ngOnInit(): void{
        this.sub = this.modelService.onOk().subscribe(x=> {
              console.log('ok clicked');
        });
    }

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