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 作为内容元素并检查元素是否具有所需的大小