Сделать сервис наблюдаемым, ждать, пока не получит ответ от другого наблюдаемого - angular 9

Question

У меня есть сценарий родительско-дочернего компонента. При нажатии кнопки в родительском компоненте я вызываю функцию ниже:

public goNextStep() {
   this.fetchAttributes.emit(new FetchAttributesEvent("myComponent", param));//calls api and get data
    this._stateService.updateStep(2); // just update step number and go to next
  }

В дочернем компоненте у меня есть наблюдаемая реализация для обоих из них, как показано ниже:

export class ChildComponent implements OnInit{

    attributes: any[];
    ngOnInit() {
           this._stateService.attributesDataInjector$
           .subscribe(
           attributesData => {

          if (attributesData != null) {
            //live data
            this.attributes = JSON.parse(attributesData);
          }
        }
      )

      this._stateService.stepUpdator$
      .subscribe(
        newStep => {
       // Use this.attributes value;
       }
     )
   }
}

Теперь моя проблема в что, поскольку emit () вызывает внешнюю службу и получает данные, это требует времени, тогда как этап обновления - это просто локальная операция, поэтому это происходит быстро. Итак, операция stepUpdator $ завершается первой, и вы пытаетесь использовать this.attributes, который на данный момент пуст, поскольку вызов api все еще выполняется. В результате я получаю здесь ошибку undefied и обработка продолжается. Позже сервисный вызов завершается, и attributeDataInjector $ инициализирует this.attributes.

Я хочу как-то подождать, пока this.attributes не будет инициализирован attributeDataInjector $, а затем обработать stepUpdator $ (что-то вроде обещания), но я не могу этого сделать . Есть зацепки?

Answer 1

Вы можете использовать оператор skipUntil rxjs для достижения этой функциональности. Он работает с двумя наблюдаемыми и предотвращает значения от первого наблюдаемого до тех пор, пока второй не выдаст значение. Для получения дополнительной информации вы можете прочитать this .

Для вашего сценария:

import { skipUntil } from 'rxjs/operators';

this._stateService.stepUpdator$
  .pipe(skipUntil(this._stateService.attributesDataInjector$))
  .subscribe(newStep => {})