angular中組件之間如何共享數據

Question

我使用 observable 將值從一個組件發送到另一個組件（數據在單擊另一個組件后發送給訂閱者，即通過主題）我訂閱另一個組件並且一切正常，直到我刷新頁面，刷新頁面后組件被重新創建，重新創建后訂閱者沒有數據，因為他沒有通過第一個組件 go。我該如何解決這個問題？

我嘗試使用 rxjs 運算符作為 shareReplay 但它不像 shareReplay 那樣工作

Answer 1

發生這種情況是因為一切都在 memory 中，並且由於 angular 應用程序正在重新初始化，頁面刷新時所有內容都丟失了。 您需要保留 state，例如將其寫入本地存儲，為此您可以使用 rxjs 中的“tap”運算符。並且在加載時您可以從 localstorage end emit-it 讀取數據，為此您可以使用 app_initializer 掛鈎。

Answer 2

由於您的 Angular 應用程序在刷新頁面時被銷毀並重建，不幸的是您將丟失所有未保存在某處的用戶 state。 這是構建 UI 時的常見問題，因此有許多工具可以解決這個問題

策略：

• 進行重要更改時存儲您的用戶 state。 這叫做持久化 state
• 在重新加載時獲取並重新應用您保存的 state。 這個叫補水state

選項：

1. 堅持本地存儲並在重新加載時檢查本地存儲值以補充
2. 堅持用戶 URL（僅限簡單值），例如以某種方式修改 URL，可以在重新加載時檢查。 假設您正在處理單個頁面， 查詢參數或片段可能是 go 的方式
3. 通過POST/PATCH調用持久化到數據庫，並在重新加載時執行 GET 請求以檢查要補充的值

這些方法都沒有內置到 RxJS 運算符中（據我所知），但我們可以輕松地利用 RxJS 來輕松實現上述任何策略。 tap運算符通常專門用於處理副作用，即應該作為 RxJS 發射的巧合發生的操作。 這正是我們在這里想要的，簡單來說：

• “如果主題發出一個值，也會觸發一個持續用戶狀態的操作”
• “在頁面加載時，檢查任何可用的已保存用戶 state 並通過相關主題發出，從而補充組件將消耗的可觀察值”

請參閱下面的示例實現

tab.service.ts

type TabType = 'first' | 'second'

@Injectable({
  providedIn: 'root'
})
export class TabService {
  tabSelectedSubject: BehaviorSubject<TabType> = new BehaviorSubject<TabType>('first')
  tabSelected$: Observable<TabType> =
    this.tabSelectedSubject
      .pipe(
        tap(tab: TabType) => {
          // ... your persist code here
          this.saveTab()
        },
        distinctUntilChanged()
      )

  constructor() {
    // ... your hydrate code here
    this.fetchAndApplyTab();
  }

  saveTab(): void {
    localStorage.setItem('tab', tab)
  }

  fetchAndApplyTab(): void {
    const savedTab: TabType | null = localStorage.getItem('tab');
    if (savedTab) {
      this.tabSelectedSubject.next(savedTab)
    }
  }
}

在這種情況下，我們正在利用我們的服務是這樣的事實：

• 一個 singleton，所以每個應用程序只加載一次（即在應用程序根目錄中提供）
• 該服務將在加載的第一個組件中實例化，該組件也會注入它

這允許我們將我們的fetchAndApplyTab()邏輯放在tab.service.ts的構造函數中並保持代碼獨立。 但是，根據您的用例，您可能希望自己從組件手動運行fetchAndApplyTab() 。

Answer 3

大多數情況下有 2 天時間在組件之間傳遞數據

1. 如果兩個組件相互關聯，則意味着父子關系，那么您可以使用輸入輸出裝飾器傳遞數據。
2. 您可以使用公共服務在 2 個組件之間共享數據。

在 SPA 應用程序中，如果您刷新瀏覽器，那么 memory 中的所有對象和可觀察對象都不存在，您需要再次 go 返回到它將被初始化的屏幕。