时间戳

首页 > 解决方案 > 从 sessionStorage 加载数据时，Angular 组件不接收来自订阅服务的数据

javascript - 从 sessionStorage 加载数据时，Angular 组件不接收来自订阅服务的数据

问题描述

在我的角度应用程序中，有一个服务接收一个对象，将其添加到对象列表中，将更新的对象数组保存到sessionStorage并将更新的列表发送到另一个订阅更改的应用程序。问题是用户刷新页面后订阅的组件没有从服务接收数据。我看到该服务已从 中检索数据sessionStorage，更新本地数组并将新加载的数据发送next给所有订阅者，但是订阅的组件不会触发订阅。

现在看一些代码：

    //some.service.ts
      private dataSub = new Subject<Data[]>();
      public dataObservable$ = this.dataSub.asObservable();
      private data: Data[] = [];
    .
    .
    .
      constructor() { 
        const data = sessionStorage.getItem("data");
        if(data){
          this.data = JSON.parse(data);
          this.dataSub.next(this.data);
        }
      }
   .
   .
   .
   public someFunction(){
      sessionStorage.setItem("data", JSON.stringify(this.data));
   }

订阅更改的组件some.service：

//some.component
private dataSubscription: Subscription = new Subscription();
public data: Data[] = [];
constructor(private someService: SomeService) { }
ngOnInit(): void {
   this.dataSubscription = this.someService.dataObservable$.subscribe(newData => {
  this.data= newData ;
 })
}

标签： javascriptangularsession-storage

解决方案

Angular 构建这些类的顺序是服务，然后是组件。

由于您的主题没有重播值（至少默认情况下），因此组件将获得未来值，而不是当前值。这是因为主题是创建、添加到然后订阅的。您可以尝试使用 BehaviorSubject 或向您的主题添加重播。这样组件在订阅时将获得当前值。

推荐阅读