在 Angular 中的組件之間傳遞文件

Question

我想使用 angular 將文件傳遞給第二個組件

this.router.navigate(['/secondComponent'], { queryParams: { file: File}})

或者通過 formData 傳遞

 var formData: any = new FormData();
 formData.append("file", file);
 this.router.navigate(['/secondComponent'], { queryParams: { file: File}})

它不像這樣工作。 我怎樣才能做到這一點？ 謝謝

Answer 1

如果您想要在 angular 路由組件之間進行適當的異步導航，那么您應該考慮使用rxjs庫，它由 angular 本地提供。 您可以按照以下步驟來實現：

1. 使用首選名稱創建新服務。
2. 在服務中創建一個新的Subject並在您的路由組件中訂閱它。
3. 在路由之前將您的文件 object 作為主題中的值發出。

Answer 2

你在這里有幾個選擇。 通過查詢參數傳遞整個File object 將不起作用。 我想從技術上講，如果您將整個文件主體作為字符串參數傳遞到 URL 中，它可能會起作用，但我不建議這樣做。

你可以做什么：

• 使用本地存儲
• 使用 Singleton 服務進行存儲
• 在導航附加文件中傳遞File object

為了堅持您當前的設置，我建議您使用第三個選項並執行以下操作：

this.router.navigate(['/some-route'], {state: {data: myFile}});

https://angular.io/guide/router

Answer 3

您可能需要考慮通過路由器傳遞文件 id 或文件名，然后在路由后重新加載文件。

您必須記住的是，用戶可能會點擊瀏覽器刷新按鈕，在這種情況下，您需要根據 url 生成整個頁面及其所有內容。