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

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的大小调整正确，但里面的地图没有，地图的中心和它的界限发生了偏移。如果您调整 window 的大小（打开开发控制台也可以），地图自我居中正确并且它可以正常工作

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

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

你可以注意到问题在开始时地图偏移了，如果你调整 windows 它会解决，然后如果你切换 sidenav，它会再次偏移。

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

大小时

有什么想法吗？

Answer 1

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

每次打开/关闭 sidenav 组件时都应调用此方法。

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

Resize sidenav-content when toggle sidenav with Material Angular and Leaflet

javascript

leaflet

typescript

angular-material2

angular