Изменение размера sidenav-содержимого при переключении sidenav с помощью Material Angular и Leaflet - PullRequest
Новая
       7

Изменение размера sidenav-содержимого при переключении sidenav с помощью Material Angular и Leaflet

0 голосов
/ 15 декабря 2018

Я использую 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 изменяется правильно, но карты внутри нет, а центр карты и ее границы смещены.Если вы измените размер окна (также работает открытие консоли разработчика), карта самоцентрируется правильно и работает правильно

Я воссоздал проблему на stackblitz: https://stackblitz.com/edit/angular-u3mrrv

Я пробовал авторазмерсвойство mat-sidenav-container, но оно не сработало.

Вы можете заметить, что проблема в начале карты смещена, если вы измените размеры окон, которые она исправит, то если вы переключите sidenav, онаполучит смещение снова.

Я думаю, проблема в том, что листовка не замечает, что ее контейнер меняет размер, и не обновляется при переключении sidenav, только при изменении размеров окон.

Любойидеи?

1 Ответ

0 голосов
/ 15 декабря 2018

Ссылаясь на документацию leaflet.js , вы можете вызвать map.invalidateSize(), чтобы вызвать изменение макета.

Этот метод следует вызывать всякий раз, когда вы открываете / закрываете компонент sidenav.

...