Angular/rxjs/Subject/BehaviorSubject跨多个组件共享http服务数据

Question

跟进问题Share data between components using a service in Angular2以及我得到的回应。

我正在尝试共享服务提供商通过 GET 检索的数据。 组件结构如下，主要路由到CustomerPortalDashboardComponent和DocumentsComponent

<CustomerPortalBaseComponent>
 <router-outlet>
  <CustomerPortalDashboardComponent/> 
  <DocumentsComponent/>
 <router-outlet>
</CustomerPortalBaseComponent>

CustomerPortalBaseComponent 进行调用以获取用户信息:

ngOnInit() {
this.customerPortalUserService.getUserInfo()
  .subscribe(
    (event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          break;
        case HttpEventType.Response:
          this.handleUserData(event.body)

      }
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {           
        console.log("Server-side error occured.");
      }
    }
  )
}
 handleUserData(data: any){
  this.userData = data;
}

客户门户用户服务

getUserInfo(){
interface ItemsResponse {
  results: string[];
}
return  this.http.get<ItemsResponse>(this.userUrl,  {
  observe: 'response',
  headers: new HttpHeaders().set(),
})
}

获取 CustomerPortalDashboardComponent 和 DocumentsComponent 中的 userData 并确保在其他组件尝试获取数据之前已检索到数据的最佳方法是什么？

Answer 1

使其发挥作用的几点:

1. 为了确保在到达路由之前加载数据，您可以使用解析器。解析器将链接到您的路由路径，并且将是一个在解析路由之前执行 Http 请求的函数。
2. 调用电话后，您需要将数据存储在存储中。这可以通过 @Ngrx 等外部存储来完成，但最基本的示例是在服务中使用变量(使用 getter/setter< 效果更好)/):

示例服务:

_equipmentDetails: any  // Should be private in use-case

...

getEquipmentDetail(clientId, modemId): Observable<any> {
  const url = 'myOwnUrl';

  return this.Http
    .get(url)
    .map(result => {
      if (result) {
        // Notice how I set the value from the Http call.
        return this._equipmentDetails = result.json();
      }
    })
    .catch(this.handleError);
}

然后您可以通过依赖注入(inject)从组件中获取属性值。

  constructor(
    ...
    private equipmentService: ServiceClass,
  ) {
    this.equipmentService._equipmentDetails;
  }