Resize sidenav -切换sidenav和Material Angular和Leaflet时的内容

Question

我使用Angular，Angular-Material和Leaflet来创建一个有sidenav和地图的网站。

<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会正确地调整大小，但里面的地图却不会，并且地图的中心和它的界限是偏移的。如果您调整窗口大小(打开dev控制台也可以)，则地图自身居中正确且工作正常

我在stackblitz上重现了这个问题：https://stackblitz.com/edit/angular-u3mrrv

我尝试过mat-sidenav-container的autosize属性，但它不起作用。

你可以在开始的时候注意到这个问题，贴图是偏移的，如果你调整窗口的大小它会修复，然后如果你切换sidenav，它会再次偏移。

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

有什么想法吗？

Answer 1

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

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