Within my Angular application, there exists a service that handles incoming objects by adding them to a list of objects, then saving the updated array to sessionStorage. This service also sends the updated list to another application that is subscribed to changes. However, an issue arises when the subscribed component does not receive the data from the service after a page refresh. Despite the service successfully retrieving the data from sessionStorage, updating the local array, and dispatching the newly loaded data using next to all subscribers, the subscribed component fails to trigger the subscription.
Here is a snippet of the relevant code:
//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));
}
The component subscribing to changes in 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 ;
})
}