Угловой материал sidenav с подменю не нажимает должным образом, когда полоса прокрутки видна
Я использую Angular Material sidenav, и в моем меню есть подменю. Когда я открываю подменю, появляется полоса прокрутки, делающая sidenav немного больше, и он покрывает часть основного контента.
Смотрите этот Stackblitz https://stackblitz.com/edit/angular-raedvz, раскройте подменю, и вы увидите поведение.
2 ответа
По умолчанию Angular Material изменяет размеры контейнера только в nav.open, window.resize или при изменении режима nav. Вы должны либо сами инициировать изменение размера контейнера, либо использовать встроенную опцию autosize, Но они советуют вам использовать его на свой страх и риск, потому что это может вызвать проблемы с производительностью.
<mat-sidenav-container class="example-container" *ngIf="shouldRun" autosize>Пример для вашего стекаблица: https://angular-wsvjf8.stackblitz.io/
Я проверил в вашем примере, и это работает для меня. Если у вас возникают проблемы с производительностью из-за того, что ваше приложение делает гораздо больше, чем просто пример (очевидно), вам, возможно, придется запустить изменение размера на вашем toggleMenu метод.
https://material.angular.io/components/sidenav/overview
Обновите свой комментарий:
Я не уверен, что это правильный путь или нет. Основываясь на том, что я могу найти в коде для autosize вариант. Они проверяют поля в каждом цикле обнаружения изменений, поэтому это может вызвать проблемы с производительностью при использовании autosize вариант. После этого они вызывают приватную функцию _updateContentMargins и исправьте поля контейнера.
Вы могли бы использовать ViewChild и получить доступ к MatSidenavContainer и вызвать эту функцию в вашем toggleMenu, Но так как _updateContentMargins Сама функция является частной, я бы ее не использовал. Лично я не могу придумать другой способ сделать это.
Вот рабочий пример вызова _updateContentMargins в вашем toggleMenu: https://stackblitz.com/edit/angular-segnwt
я использую setTimeout здесь _ngZone из MatSidenavContainer теперь также стал приватным.
Добавление autosize Атрибут должен исправить вашу проблему. Хотя это, похоже, влияет на производительность.
Посмотрите на эту проблему GitHub: https://github.com/angular/material2/issues/9601