fxShow и fxHide не скрывают / не показывают навигационное меню

Question

fxShow и fxHide не скрывают / не показывают опции меню в моем коде, я протестировал другие атрибуты flex-layout, такие как flexLayout и flexLayoutAlign, и все эти работы.

Я пробовал код, которыйЯ скопировал именно со страницы Flex-Layout github, и она не работает.

Вот что я тестирую, я хочу скрыть меню на экранах, которые больше среднего:

  <div fxLayout="row">
    <a [routerLink]="['/']">Home</a>
    <a [routerLink]="['/']">About</a>
  </div>

  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
</mat-toolbar>

<mat-menu #menu="matMenu"  fxHide fxShow.lt-md>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

В результате меню не скрывается независимо от размера экрана и отображается постоянно. Нет сообщений об ошибках, и когда я смотрю на атрибуты в инструментах разработчика, эти атрибуты перечислены.

Answer 1

Согласно документации

Элемент <mat-menu> ничего не отображает. Он открывается с помощью директивы matMenuTriggerFor.

В вашем случае, я думаю, что вы хотите скрыть кнопку menu вместо

<button mat-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-md>Menu</button>

Вот демонстрационная версия StackBlitz .

Answer 2

, поскольку вы хотите, чтобы он отображался по умолчанию, но скрывался на экранах, больших среднего, тогда он должен быть

<mat-menu #menu="matMenu" fxShow fxHide.lt-md>
 <button mat-menu-item>Item 1</button>
 <button mat-menu-item>Item 2</button>
</mat-menu>