如何检查Angular中是否填充了可观测值？

Question

我希望通过一个HTTP请求在应用程序中集中加载一些数据，并希望将这些数据传递给多个单独的组件。我正在使用Behavior Subject类设置加载到共享服务中的可观察对象中的数据，并在单个组件中订阅它。

共享服务：

  data: Observable<any>;

  load_data(){
  this.http.post('/myAPIMethod', {myInputs}).subscribe(
      res => {
              var dataSource=new BehaviorSubject(res);
              this.data = dataSource.asObservable();
          }, error => {
          console.log(error);
      });
  }

app.component.ts：

constructor(private shared: SharedService) { }
ngOnInit(){
  this.shared.load_data();
  }

myComponent.component.ts

constructor(private shared: SharedService) { }
ngAfterViewInit(){
  this.shared.data.subscribe(
      res => {console.log(res)},
      err => {console.log(err)}
    );
}

由于我的app.component.ts和myComponent.component.ts文件是异步和独立加载，我得到一个错误，当它试图订阅'数据'观察myComponent甚至在应用程序加载数据之前。我得到一个未定义的错误订阅（'data'是未定义的，它已经试图订阅）。

在myComponent文件中订阅“数据”可观察值之前，如何检查该值是否已设置？

Answer 1

使用主题：

data = new Subject();

load_data(){
  this.http.post('/myAPIMethod', {myInputs}).subscribe(
      res => {
              this.data.next(res);
          }, error => {
          console.log(error);
      });
}

这样，您的组件可以在数据返回之前订阅主题，并在收到超文本传输协议调用时发出数据。

另外，如果您不打算在subscribe函数中操作DOM/View元素，那么在ngOnInit中调用它：yourComponet.ts

ngOnInit(){
  this.shared.data.subscribe(
      res => {console.log(res)},
      err => {console.log(err)}
    );