[英]Angular How to call method from child after parent component template changes
I have a parent component, it has a side menu and content.我有一个父组件,它有一个侧面菜单和内容。 Inside the content, a child component is rendered using router-outlet.
在内容内部,使用 router-outlet 呈现子组件。
| menu | content |
| | |---------------------------| |
| | | child | |
| | | | |
| | | xterm | |
| | | | |
| | |---------------------------| |
At the push of a button calls method按下按钮调用方法
toggleMenu(){
isCollapsed = !isCollapsed
store$.dispatch(sidenavUpdated(data))
}
the menu collapses or expands菜单折叠或展开
<mat-sidenav [fxFlex]="sidenavWidth" ...
get sidenavWidth(){
If(isCollapsed){
return 40px
}
return 200px }
I should to wait for the content width to change and then in the child component, run the method to re-render the web shell (xterm.js).我应该等待内容宽度发生变化,然后在子组件中,运行重新渲染 web shell (xterm.js) 的方法。 The child component is subscribed to changes in the store.
子组件订阅存储中的更改。
store$.pipe(...).subscribe (()=>{resizeTerm();})
In the debugger, the sequence of code execution is as follows在调试器中,代码执行顺序如下
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? 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?
This problem can have two solutions这个问题可以有两种解决方案
x
and use this time as arg of debounceTime
operator in subscribing the store
x
并将此时间用作debounceTime
运算符的 arg 订阅store
store$.pipe(debounceTime(x), ...)
ResizeObserver
api for content element and check if the element has the desired size or notResizeObserver
api 作为内容元素并检查元素是否具有所需的大小
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.