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

Question

我正在使用Angular，Angular-Material和Leaflet创建一个具有A sidenav和map的Web。

<mat-sidenav-container class="map-bar-container">
    <mat-sidenav #sidenav mode="side" opened class="nav">
        <app-sidenav></app-sidenav>
    </mat-sidenav>

    <mat-sidenav-content class="cmap">
        <app-map></app-map>
    </mat-sidenav-content>
</mat-sidenav-container>

问题是当切换sidenav时，sidenav-content正确调整大小，但是里面的地图没有，并且地图的中心及其限制是偏移的。 如果您调整窗口大小（打开开发控制台也可以），地图自我居中正确，它可以正常工作

我在stackblitz上重新创建了这个问题： https ：//stackblitz.com/edit/angular-u3mrrv

我已经尝试了mat-sidenav-container的autosize属性，但它没有用。

您可以在开始时注意到地图偏移的问题，如果您调整它将修复的窗口大小，那么如果您切换sidenav，它将再次获得偏移。

我认为问题是传单没有注意到它的容器正在改变大小，并且在调整sidenav时它没有更新，就在调整窗口大小时。

有任何想法吗？

Answer 1

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

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