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

【问题标题】：Angular component does not receive data from subscribed service when data is loaded from sessionStorage从 sessionStorage 加载数据时，Angular 组件不接收来自订阅服务的数据
【发布时间】：2021-12-25 13:38:48
【问题描述】：

在我的 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 ;
 })
}

【问题讨论】：

这听起来像是一个操作顺序问题。当您的应用重新加载时，它将按以下顺序创建您的类：服务 - 运行 ctor 并在您的主题上调用 .next；然后是 Component，它监听主题。由于您的主题没有重播该组件将获得未来值，而不是当前值。这是因为主题是创建、添加到然后订阅的。您可以尝试使用 BehaviorSubject 或向您的主题添加重播。如果可行，我可以将其放入答案表单中，以便我们为下一个人提供更好的详细信息。
谢谢，这正是问题所在。请将此评论添加为答案。

标签： javascript angular session-storage

【解决方案1】：

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

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

【讨论】：