#angular #angular-material
#угловой #угловой материал
Вопрос:
Может ли кто-нибудь помочь мне определить положение открытого меню? Мне нужно применить стили для другого поведения в позиции. У меня проблема, когда внизу нет места для расширения, оно автоматически расширяется сверху, как я могу определить, что мои пункты меню изменили свое положение?
Заранее спасибо!
Комментарии:
1. это мат-меню или вы создали его на заказ ?
2. @Dakopatel просто lt;мат-менюgt;
3. не могли бы вы, пожалуйста, добавить код и подробно объяснить, чего именно вы хотите ?
4. вы можете определить переменную в component.ts после изменения переменной в соответствии с областью просмотра.
5. @Dakopatel спасибо тебе! Я добавил прослушиватель хоста при изменении размера с помощью функции, которая подсчитывает разницу между двумя якорями ViewChild по клиентам, благодаря чему я знаю, каким образом открыт мой раскрывающийся список
Ответ №1:
спасибо @Dakopatel за совет!
в html я добавил #mainTrigger и #меню для получения ссылок на элементы:
lt;div class="flex align-center space-between" [matMenuTriggerFor]="dropdownMenu" #trigger="matMenuTrigger" (click)="getMenuPosition($event)" (menuClosed)="above = false;" #mainTriggergt; lt;/divgt; lt;mat-menu #dropdownMenu="matMenu" class="drop-list"gt; lt;div class="menu-panel" #menuItemsgt; // some for function here lt;/divgt; в компонете:
@ViewChild('menuItems') menuItems: any; @ViewChild('mainTrigger') mainTrigger: ElementRef; above: boolean; @HostListener('window:resize', ['$event']) getScreenSize(event?) { this.getMenuPosition(); } constructor() { this.getScreenSize(); } getMenuPosition() { setTimeout(() =gt; { const main = this.mainTrigger.nativeElement.getBoundingClientRect(); const child = this.menuItems.nativeElement.getBoundingClientRect(); this.above = main.y gt; child.y; }, 100); }