Можно ли открыть позицию мат-меню?

#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);  }