如何检查 Angular 中是否填充了 Observable 值？

Question

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

共享服务：

  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 中的“数据”Observable 时也会出现错误。我收到未定义错误的订阅（“数据”未定义，它已经在尝试订阅）。

如何在 myComponent 文件中订阅之前检查设置的“数据”Observable 值？

Answer 1

改用Subject：

data = new Subject();

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

这样你的组件可以在数据返回之前订阅Subject，并在收到http调用时发出数据。

此外，如果您不打算在订阅函数中操作 DOM / View 元素，请改为在 ngOnInit 中调用它： yourComponet.ts

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