Angular - 優化顯示組件的 HTTP 調用

Question

你會如何解決這個問題？

設置：我有這個頁面，我可以根據用戶在側邊菜單上單擊的位置在組件之間導航

建築學

問題：顯示的每個組件都需要執行 API get 調用以獲取用戶可以在其上執行 CRUD 操作的表，因此每次用戶切換視圖時都有加載時間。

問題：如何優化它以避免每個組件的加載時間？ 我考慮過在父組件內部進行一次 get 調用，然后通過“@Input”將每個數據傳遞給其對應的組件，但是知道每個組件內部都有一個用戶可以與之交互的 CRUD 表，數據是否足夠新鮮?

謝謝你讀我

Answer 1

正如您所說，您可以對父組件進行 API 調用並將它們傳遞給子組件，冒着用戶查看相應組件時數據不是最新的風險，或者在加載每個組件時進行 API 調用，有一些加載時間。

兩者的混合也是可能的（但可能比需要的更復雜）：您可以在父組件上執行所有GET API 調用，並在每次子組件初始化時重做它們，並且僅在存在差異時更新視圖數據。 如果您想走這條路，請查看狀態管理（ngrx 或類似的東西）。