javascript - Ändra storlek på sidenav-content när du växlar sidenav med Material Angular och Leaflet

Jag använder Angular, Angular-Material och Leaflet för att skapa ett webbnät som har en sidenav och en karta.

<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>

Problemet är att när man växlar sidomenyn ändrar sidomeny-innehållet storlek korrekt, men kartan inuti gör det inte, och kartans centrum och dess gränser är förskjutna. Om du ändrar storlek på fönstret (att öppna utvecklarkonsolen fungerar också) centrerar kartan sig korrekt och den fungerar som den ska.

Jag har återskapat problemet på stackblitz: https://stackblitz.com/edit/angular-u3mrrv

Jag har försökt med autosize-egenskapen på mat-sidenav-container men det fungerade inte.

Du kan märka problemet i början, kartan är förskjuten, om du ändrar storlek på fönstret kommer det att fixas, sedan om du växlar sidomenyn, kommer det att bli förskjutet igen.

Jag tror problemet är att leaflet inte märker att dess behållare ändrar storlek och den uppdateras inte när man växlar sidomenyn, bara när man ändrar storlek på fönstren.

Några idéer?

Svar #1

Med hänvisning till leaflet.js-dokumentationen kan du anropa map.invalidateSize() för att utlösa en omlayout.

Du bör kalla på den här metoden varje gång du öppnar/stänger sidomenyns komponent.