Angular Session Storage Set 和 Get 在同一页面上

Question

我们使用的 Angular 6 包含超过 15 个组件。当我们第一次加载页面时，第一个父组件将触发服务调用，并根据响应设置 sessionStorage。

接下来其他组件将使用 get sessionStorage 来使用数据。但是有时，如果服务调用延迟，那么我们将无法获取其他组件上的数据，最终会出现空白数据。

父组件中的代码：

this.siteConfigurationService.configData(this.id).subscribe((data: any) => {
    const orderActionArr = [data];
    if (!data.hasOwnProperty("errors")) {
        this.sessionMgmtService.setSessionItem("configData", data[0]["configData"], 1);
    }
});

其他组件中的代码。

this.sessionMgmtService.configData$.subscribe((data: any) => {
    if (data) {
        this.configData = data;
    }
});

HTML 文件：

{{configData[0].personName}}

sessionMgmtService 是另一个服务组件，我们在其中维护会话存储的 set 和 get 方法。

我们正在使用上述订阅，但它对我们没有帮助。每当服务调用延迟时，我们都会遇到问题。

是否有任何解决方法可以实现这一点？

Answer 1

this.siteConfigurationService.configData(this.id).subscribe((data: any) => {
    const orderActionArr = [data];

    
    if (!data.hasOwnProperty("errors")) {


      this.sessionMgmtService.setSessionItem("configData", data[0]["configData"], 1);

      // you have to emit data or data[0] (whatever) from here so other components will receive it.
      this.sessionMgmtService.configData$.next(data); 

    }
});