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调用仍在进行中，因此当前为空。结果，这里出现未定义的错误，处理继续进行。稍后，服务调用完成，attributesDataInjector $初始化了this.attributes。

我想以某种方式等待直到由attributeDataInjector $初始化this.attributes，然后处理stepUpdator $（类似于promise），但是我无法做到这一点。有线索吗？

Answer 1

您可以使用skipUntil rxjs运算符来实现该功能。它对两个可观察值起作用，并防止第一个可观察值直到第二个可观察值发出该值为止。有关更多信息，您可以阅读this。

针对您的情况：

import { skipUntil } from 'rxjs/operators';

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

使服务可观察，直到收到其他可观察的响应-角度9

1 个答案: