Как очистить события потока rxjs на втором компоненте init

Question

У меня проблема в том, что после уничтожения компонента и повторной инициализации все наблюдаемые немедленно запускают одни и те же события, которые они инициировали перед уничтожением.

Например, прослушиватель текущих параметров маршрута, таких как здесь:

export class SomeComponent extends OnInit, OnDestroy {

  private alive = new Subject<void>();

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
    .pipe(takeUntil(this.alive))
    .subscribe(params => console.log(params));
  }

  ngOnDestroy() {
    this.alive.next();
    this.alive.complete();
  }

}

Когда я продолжаю изменять текущий маршрут, консоль регистрирует отдельные маршруты - это правильно.Но когда я перенаправляю на другой маршрутизатор и компонент уничтожается, а затем я снова возвращаюсь, я сразу получаю что-то вроде:

{param: 1}
{param: 3}
{param: 2} // <-- those 4 are previous history
{param: 1}
{param: 5} // this is what I go back into

Похоже, что события запускаются снова и снова.Почему это происходит?Как я могу решить это?Я пытался отписаться, takeWhile, кажется, ничего не работает.

Answer 1

ActivatedRoute.params - это BehaviorSubject, поэтому при подписке он выдает свое последнее значение сразу.

Если вы хотите игнорировать первое значение, которое вы можете использовать, skip(1):

this.route.params.pipe(
  skip(1),
  takeUntil(this.alive),
).subscribe(params => console.log(params));