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

Posted 2023-02-18

【中文标题】使用 Material Angular 和 Leaflet 切换 sidenav 时调整 sidenav-content 的大小

【英文标题】：Resize sidenav-content when toggle sidenav with Material Angular and Leaflet

【发布时间】：2019-05-16 17:34:02

【问题描述】：

我正在使用 Angular、Angular-Material 和 Leaflet 来创建一个具有侧导航和地图的网络。

<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 时它没有更新，只是在调整窗口大小时。

有什么想法吗？

【参考方案1】：

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

您应该在打开/关闭 sidenav 组件时调用此方法。

【讨论】：

这些似乎正是我所需要的。另外我必须等待切换动画结束才能调用map.invalidateSize()。最终代码public toggle(): void this.sidenav.toggle().then(() => this.mapService.updateSize(););

现在我还有一个问题，是否可以不等待切换动画结束就知道 sidenav-container 的新大小？我希望两个动画同时运行，而不必等待切换完成