Question

我已经编写了一个服务commonService，该服务用于在两个组件之间共享数据，即componentA（用于设置数据）和componentB（用于获取数据），但是在刷新componentB时，数据会丢失。有没有一种方法可以让我在重载时持久保存数据。

@Injectable()
export class commonService { 
 private dataArray = [];

 setData (data: any) {
  this.dataArray = data;
} 

getData () {
 return this.dataArray
 }
}


 import {commonService} from './commonService';

export class componentA implements OnInit {

private dataArray = [1,2,3,4] 

constructor(private service: commonService) {
}
ngOnInit() {

 service.setData (dataArray);
}

}
    import {commonService} from './commonService';

    export class componentB implements OnInit {

    private dataArray = []; 

    constructor(private service: commonService) {
    }
    ngOnInit() {

     dataArray = service.getData();
    } 
}

Answer 1

刷新页面时，共享数据将丢失。

在这种情况下，您需要使用localStorage或sessionStorage来存储共享数据。

Answer 2

您的服务需要将数据保存在LocalStorage或IndexedDB中。

您可以使用以下角度包装器： ngx-localstorage或 ngx-indexed-db

Answer 3

刷新页面类似于重新启动单页面Web应用程序。刷新时，默认情况下会重置组件和对象状态。如果您希望对象状态在刷新后仍然存在，则只需要通过本地或会话存储来存储它，或者从OnInit的外部服务中获取它即可。

重新加载时如何在组件之间持久保存共享服务数据

3 个答案: