程式碼範例

Previous Component Function

const navigationExtras: NavigationExtras = {
  state: {
    user: 'John Doe',
    age: 30,
  },
};
this.router.navigate(["/next"], navigationExtras);

Next Component

class NextComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit(): void {
    console.log(this.location.getState());
    // {
    //     user: 'John Doe',
    //     age: 30,
    // }
  }
}

Router.navigate() 和 Location.getState()

在 Angular 中，Router.navigate() 方法和 Location.getState() 函數是與路由導航和路由狀態管理相關的兩個不同概念。

1. Router.navigate(commands: any[], extras?: NavigationExtras | undefined):

   • Router.navigate() 用於觸發路由導航。這個方法接受兩個參數：commands 和 extras。
   • commands 是一個路徑或命令陣列，用於指定導航的目標路徑。
   • extras 是一個 NavigationExtras 物件，它提供了額外的導航選項，如 queryParams、fragment、replaceUrl、state 等。

   當您使用 Router.navigate() 導航到一個新路徑時，可以通過 extras 的 state 屬性傳遞一些自定義的狀態數據。這些數據在導航過程中會被保留下來。

2. Location.getState():

   • Location 服務提供了一種方式來獲取當前路由狀態的數據，其中包括通過 Router.navigate() 傳遞的 state。
   • 使用 getState() 方法，您可以獲取與當前路由相關的狀態數據，這在處理路由導航和數據傳遞時非常有用。

因此，Router.navigate() 和 Location.getState() 之間的關係在於：您可以使用 Router.navigate() 來進行路由導航並可選地傳遞一些狀態數據；隨後，您可以使用 Location.getState() 來獲取這些傳遞的狀態數據。這對於在不同頁面或組件間共享數據非常有用，特別是當您不希望這些數據出現在 URL 中時。

瀏覽器實作

在使用 Angular 的 Router.navigate() 帶有 state 參數進行路由導航時，傳遞的數據會存儲在瀏覽器的歷史狀態（History State）中。這裡是一些細節：

1. 瀏覽器的歷史狀態（History State）:

   • 當您使用 state 參數傳遞數據時，這些數據會被添加到瀏覽器的歷史紀錄中。
   • 歷史狀態是瀏覽器提供的一個機制，它允許開發者在瀏覽器的歷史紀錄（即前進和後退導航）中存儲一些狀態數據。

2. 獲取存儲的數據:

   • 您可以使用 Location.getState() 或 history.state 在 JavaScript 中獲取當前歷史紀錄條目的狀態對象。
   • 這些狀態數據僅與當前的歷史紀錄條目相關聯，並且在進行新的導航時不會被保留。

3. 狀態的限制:

   • 歷史狀態的一個限制是它的大小。大多數瀏覽器對於存儲在歷史狀態中的數據量有限制。
   • 另外，由於這些數據與特定的歷史紀錄條目綁定，所以它們不是永久存儲的，一旦用戶離開該頁面，這些數據將不再可用。

因此，當您使用 Router.navigate() 並通過 extras 中的 state 傳遞數據時，這些數據是暫時存儲在瀏覽器的歷史狀態中，用於與特定導航相關聯的情境，而不是永久存儲或跨會話保存。