使用Material Angular和Leaflet切换sidenav时调整sidenav-content的大小

Question

我正在使用Angular，Angular-Material和Leaflet来创建具有A sidenav和地图的网络。

~/.ocamlinit

问题是，当切换sidenav时，sidenav内容的大小会正确调整，但内部的地图不会调整大小，并且地图的中心及其边界会偏移。 如果您调整窗口大小（打开开发控制台也可以），则地图自我居中正确且可以正常工作

我已经在stackblitz上重新创建了该问题：https://stackblitz.com/edit/angular-u3mrrv

我尝试过mat-sidenav-container的autosize属性，但是没有用。

您会注意到地图开始时出现偏移的问题，如果您调整将要修复的窗口的大小，那么如果切换sidenav，它将再次偏移。

我认为问题在于传单没有注意到其容器正在改变大小，并且在切换sidenav时（只是在调整窗口大小时）没有更新。

有什么想法吗？

Answer 1

参考leaflet.js documentation，您可以调用map.invalidateSize()来触发重新布局。

无论何时打开/关闭sidenav组件，都应调用此方法。