Angular：從另一個組件傳遞的數據在頁面重新加載時變得未定義

Question

在我的 angular 應用程序中，我需要一個組件將數據傳遞給另一個沒有父子關系的組件。我在一個組件中有一個Orders table ，每一行代表一個訂單。 當用戶單擊任何特定行時，我需要導航到 OrderDetails 組件並傳遞表示單擊行的訂單對象

驗證.component.html

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

驗證.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);
  }

訂單詳情.component.html

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

orderdetails.component.html在從validation.component.html導航時顯示訂單 ID，但刷新訂單詳細信息頁面會導致訂單 ID 消失。 我了解頁面刷新history.state.data變為未定義但如何解決此問題？ 由於該應用程序是 SPA，因此將來自validationcomponent的數據存儲到服務並在orderdetailscomponent使用該服務也不起作用。

頁面刷新意味着重新加載整個 angular 應用程序，驗證組件存儲在服務中的訂單對象也將消失。 如何解決這個問題？ 我希望先前存儲在服務中的數據不受影響並在頁面重新加載時再次顯示？

Answer 1

有3種處理方法：

1. 使用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'))
   }
}

2. 使用緩存（不推薦）
3. 不是傳遞整個數據，而是將id作為路由器數據傳遞並進行服務器調用以獲取id詳細信息。 這將在 url 中維護id ，因此您可以通過調用服務器獲取刷新的詳細信息

Answer 2

嘗試將 ngOnChanges

ngOnChanges 檢測來自其他組件的更改，特別是從服務的 api 調用

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