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

【问题标题】：Angular 6 'data' become Undefined when refreshing the page刷新页面时，Angular 6“数据”变为未定义
【发布时间】：2018-10-07 12:13:49
【问题描述】：

我正在使用 Angular 6 开发一个新的网络应用程序。我正在使用“共享服务”将数据从一个组件发送到另一个组件。我可以非常轻松地发送它。当我尝试刷新页面时，共享服务数据变得未定义并且应用程序中断。当然，我尝试了 if 条件，它运行良好，并且应用程序重定向到上一页；

但是除了 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() { }


}

【问题讨论】：

嗨 Pepe，我遇到了这个问题。你解决了这个问题吗？
是的，你可以使用浏览器本地存储

标签： typescript angular6

【解决方案1】：

除非您使用数据库来存储数据并每次在 ngOnInit() 上检索数据，否则它将无法工作，因为每次刷新每个值都会重新初始化，除非该数据是硬编码的。

我建议Firebase 使用angularfire2

【讨论】：

谢谢！。你能告诉我如何使用firebase吗？因为我目前正在使用firebase
github.com/angular/angularfire2/blob/master/docs/rtdb/…（向下滚动并找到保存数据，在该页面上还可以找到有关检索的更多信息），您还可以在他们的 YouTube 频道“Angular Firebase”上找到许多很好的教程
它是关于火力的，我想；但我正在使用firestore
Firestore 位于 Firebase 中。 Firebase 是一种后端即服务 (BaaS)。 Firestore 是一个数据库。
你能告诉我两者之间的区别吗？如果是这样，那将非常有帮助

【解决方案2】：

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

您的共享服务可能看起来像

 @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');
  }
}

【讨论】：