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