问题的原因是在组件订阅服务之前,数据已经从sessionStorage中加载完成。解决这个问题的方法是使用BehaviorSubject。
在服务中,实例化BehaviorSubject来存储数据,并暴露一个只读的Observable。
例如:
import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new BehaviorSubject
setData(data: any) { sessionStorage.setItem('data', JSON.stringify(data)); this.dataSubject.next(data); }
getData() { const data = sessionStorage.getItem('data'); if (data) { this.dataSubject.next(JSON.parse(data)); } } }
在组件中,订阅服务的Observable,以便在数据可用时接收数据。
例如:
import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service';
@Component({ selector: 'app-data', templateUrl: './data.component.html', styleUrls: ['./data.component.css'] }) export class DataComponent implements OnInit { data: any;
constructor(private dataService: DataService) {}
ngOnInit() { this.dataService.dataObservable$.subscribe(data => { this.data = data; }); } }
这样,每当数据可用时,订阅服务的组件都将接收到数据。