Question

我正在使用angular 6开发一个新的Web应用程序。我正在使用``共享服务''将数据从一个组件发送到另一个组件，我可以非常舒适地发送它。当我尝试刷新页面时，共享服务数据变得不确定，应用中断。当然，我尝试了if条件，它可以正常工作，并且应用程序重定向到了上一页；

但是除了条件以外，还有其他方法，因此浏览器应该与以前的数据一起停留在“ setupItemComponent”中，并且共享数据不应是未定义的

预先感谢

这是我的代码：

setup.ts:
=================

constructor(private router:Router,private sharedservice:SharedService){}

onCLickEdit(clickedData:any){

//function will execute when button clicks
sharedservice.data=clickedData;
this.router.navigate(['setup/setup_items'])
}


setupItem.ts
====================

data:any;
constructor(private sharedservice:sharedService){}

ngOnInit() {
this.data = this.sharedData.data;
if (this.data) {
  this.formValidation();
}
else {
  this.router.navigate(['setup']);
}

}


 sharedService.ts
==================

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
 })
 export class ShareDataService {

data: any;

constructor() { }


}

Answer 1

除非您使用数据库来存储数据并每次在ngOnInit（）上检索，否则它是行不通的，因为每次刷新时，除非对数据进行硬编码，否则每个值都会重新初始化。

我建议Firebase使用angularfire2

Answer 2

很显然，刷新页面时，您将丢失传递的数据。在这种情况下，可以使用Web Storage在用户的浏览器中本地存储数据。在这里，我认为最好使用会话存储。

您的共享服务可能如下

 @Injectable({
  providedIn: 'root'
})

export class ShareDataService {

  private data: any;

  constructor(private storage: SessionStorageService) {
  }

  public clearLocalStorage() {
    this.storage.clear('sharedData');
  }

  public setdata(data: any) {
    this.data = data;
    this.storage.store('sharedData', data);

  }

  public getdata() {
    return this.storage.retrieve('sharedData');
  }
}

刷新页面时，Angular 6“数据”变为未定义

2 个答案: