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

Question

В моем приложении Angular есть компонент, данные которого зависят от параметра маршрута.Когда страница открывается в первый раз, данные загружаются правильно.Когда я перехожу на другую страницу, но остаюсь на том же компоненте (поэтому меняются только один параметр маршрута), новые данные не загружаются.

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

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

как лучше всего решить эту проблему, чтобы также получить данные из второйobservable?

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

ngOnInit(): void {
  this.route.parent.paramMap.subscribe((paramMap: ParamMap) => {
    this.id = paramMap.get('id');
    this.observable= this.service.getSomething(this.id);
  }
  this.observable.subscribe(
    // callback that handles the processing of the data
  )
}

Answer 1

Используйте операторы:

ngOnInit() {
  this.observable = this.route.parent.paramMap.pipe(
    map(paramMap => paramMap.get('id')),
    switchMap(id => this.service.getSomething(id))
  );
}

switchMap отменит ожидающие запросы.

Если вы хотите, чтобы они оставались активными, используйте mergeMap.

Answer 2

Я мог бы представить, что вы хотите сделать что-то вроде ниже (rxjs v6):

  ngOnInit(): void {
    this.route.parent.paramMap.pipe(
      map(paramMap: ParamMap) => this.id = paramMap.get('id'),
      mergeMap(id => this.service.getSomething(this.id))
    )
      .subscribe(
        // callback that handles the processing of the data
      )
  }

, поэтому при изменении параметров запускается весь канал и вызывается служба.

Answer 3

Вы можете использовать switchMap форму оператора RxJS здесь как:

ngOnInit(): void {
    this.route.parent.paramMap.pipe(switchMap((paramMap: ParamMap) => {
      this.id = paramMap.get('id');
      return this.service.getSomething(this.id);
    })).subscribe(
        // callback that handles the processing of the data
      );
}