Angular：从另一个组件传递的数据在页面重新加载时变得未定义答案

【问题标题】：Angular: data passed from another component becomes undefined on the page reloadAngular：从另一个组件传递的数据在页面重新加载时变得未定义
【发布时间】：2020-02-09 12:52:42
【问题描述】：

在我的 Angular 应用程序中，我需要一个组件将数据传递给另一个没有父子关系的组件。我在一个组件中有一个 Orders table，每一行代表一个订单。当用户单击任何特定行时，我需要导航到 OrderDetails 组件并传递代表单击行的订单对象

validation.component.html

 <tr *ngFor="let order of allOrders" (click)="onNavToOrderDetails(order)">
    <td>{{order.id}}</td>
 </tr>

validation.component.ts

onNavToOrderDetails(order) {
    this.router.navigate(['orderdetails'], { state: {data: order} });
 }

orderdetails.component.ts

   order;
  ngOnInit(): void {
    this.order=history.state.data;
   console.log(this.order);
  }

orderdetails.component.html

<p>{{order.id}}</p>

orderdetails.component.html 从validation.component.html 导航时会显示订单 ID，但刷新订单详情页面会导致订单 ID 消失。我了解页面刷新history.state.data 变得未定义但如何解决这个问题？由于该应用程序是 SPA，因此将数据从 validationcomponent 存储到服务并在 orderdetailscomponent 中使用该服务也不起作用。

页面刷新意味着重新加载整个Angular应用程序，验证组件存储在服务中的订单对象也会消失。如何解决这个问题？我希望以前存储在服务中的数据不受影响并在页面重新加载时再次显示？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

有3种处理方式：

使用 sessionStorage（不要使用 localStorage），但请确保根据场景维护 sessionStorage 数据

ngOnInit(): void {
   if(history.state.data){
     this.order=history.state.data;
     sessionStorage.setItem('order_page_info', JSON.stringyfy(this.order));
   }else{
     this.order = JSON.parse(sessionStorage.getItem('order_page_info'))
   }
}

使用缓存（不推荐）
不是传递整个数据，而是传递id 作为路由器数据并调用服务器以获取id 的详细信息。这将在 url 中维护id，因此您可以通过调用服务器获取刷新详细信息

【讨论】：

即使我只传递了 Id ，它仍然会在页面刷新时丢失，对吧？

【解决方案2】：

尝试使用 ngOnChanges

ngOnChanges 检测来自其他组件的更改，特别是来自服务的 api 调用

ngOnChanges(){
 this.order=history.state.data
}

【讨论】：