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

Question

我正在使用 Angular、Angular-Material 和 Leaflet 创建一个具有 sidenav 和 map 的网络。

<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 的大小调整正确，但里面的 map 没有，而且 map 的中心和它的限制是偏移的。如果您调整窗口大小(打开开发控制台也可以)， map self 中心正确并且它正常工作

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

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

您会注意到问题在开始时 map 偏移了，如果您调整窗口大小它会修复，然后如果您切换 sidenav，它会再次偏移。

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

有什么想法吗？

Answer 1

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

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