請教Angular頁面保存問題

General
1

目的是可以新增多個Tab，每個Tab 都是一個獨立的Component，可以自由切換頁面並保留各頁面的狀態及資料。想請教是否有類似的功能可以達到?

如下圖，點選Radio後會動態切換Component，但是Component A如果打字到一半，在切換到Component B後再回到Component A，要如何讓Component A的資料及狀態是被完整保留的?

%E6%93%B7%E5%8F%96

2

先講一下我的想法，還沒去實驗過
首先每個tab的component應該是都要先載入進來，切換tab的時候只是切換顯示，而不是重新載入component，才有辦法讓你輸入的資料不被重新載入

那如果說你不想要這樣的作法，就變成必須要去記憶，每個component所輸入的資料

3

我也有想到這點，用selector來顯示三個Component，再依據點選的Radio來切換顯示。
但是沒辦法用ngIf的方式來做顯示/隱藏。
還在查詢有什麼方式可以載入多個Component，然後做隱藏的動作

%E6%93%B7%E5%8F%96
擷取.JPG899×241 28.2 KB

5

這一個我會用 reactive form 搭配 localStorage 的方式來保存每一個 component 的輸入資料
不然就要用 hidden 了，但不建議

或是另外一種做法，所有的資料存取放在 host component, 然後 app-comp1~3 只透過 input/output 的方式來存取資料。這樣的方式，所輸入的資料就不會隨著 component 消失而不見

6

應該是說從Menu選單選取後會出現Tab分頁，可能點了5個不同選單就開啟5個頁面，希望這些頁面可以獨立運作不影響彼此。所以才會想說Component是否可以各別出現，然後點選Tab做切換。

7

3 個想法

  1. 各 component 分別處理各自的 temp data, 例如在 OnDestroy 時，要如何處理尚未儲存的資料 (https://youtu.be/JLij19xbefI)
  2. 用 service 來處理各自的資料
  3. 用 redux 模式, 套件像是 ngrx, ngxs
1個讚
8

總算找到比較符合現況的方法了，只要加上[hidden]="true"就可以達到預期結果了!!

  1. 建立一個Basic Component 和 Basic Module
  2. 在Basic Component 中載入所需要的Component

這樣也能同時達到Lazy loading的效果。
只是同時載入的Component對router會不會造成影響，或者沒辦法使用router params就還要在實驗了

  1. HTML
    %E6%93%B7%E5%8F%96

  2. Result
    %E6%93%B7%E5%8F%96

感謝各位大大提供的意見!!