Angular 父組件模板更改后如何從子調用方法

Question

我有一個父組件，它有一個側面菜單和內容。 在內容內部，使用 router-outlet 呈現子組件。

|   menu  |         content               |
|         | |---------------------------| |
|         | |        child              | |
|         | |                           | |
|         | |        xterm              | |
|         | |                           | |
|         | |---------------------------| |

按下按鈕調用方法

toggleMenu(){
    isCollapsed = !isCollapsed
    store$.dispatch(sidenavUpdated(data))
}

菜單折疊或展開

<mat-sidenav [fxFlex]="sidenavWidth" ... 
get sidenavWidth(){
     If(isCollapsed){
      return 40px
    }
   return 200px }

我應該等待內容寬度發生變化，然后在子組件中，運行重新渲染 web shell (xterm.js) 的方法。 子組件訂閱存儲中的更改。

store$.pipe(...).subscribe (()=>{resizeTerm();})

在調試器中，代碼執行順序如下

1. 單擊->切換菜單（）
2. 商店$.dispatch(...
3. in child store$.pipe(...).subscribe (()=>{resizeTerm();}) //從 store 獲取通知並開始重繪 web shell
4. [fxFlex]="sidenavWidth" //從 sidenavWidth() 獲取寬度

My web shell redraws before the parent template gets the new width for ".content" How can I wait for a change in the parent's html and then re-render mine web shell?

Answer 1

這個問題可以有兩種解決方案

• 將折疊菜單的時間計算為x並將此時間用作debounceTime運算符的 arg 訂閱store

store$.pipe(debounceTime(x), ...)

• 使用ResizeObserver api 作為內容元素並檢查元素是否具有所需的大小