fxShow 和 fxHide 不是 hiding/showing 导航菜单

Question

fxShow 和 fxHide 不是 hiding/showing 我代码中的菜单选项，我已经测试了 flex-layout 的其他属性，如 flexLayout 和 flexLayoutAlign 以及所有这些工作。

我已经尝试过完全从 Flex-Layout github 页面复制的代码，但它不起作用。

这是我正在测试的内容，我想在大于中型的屏幕上隐藏菜单：

<mat-toolbar>
  <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 #menu="matMenu" fxShow fxHide.lt-md>
 <button mat-menu-item>Item 1</button>
 <button mat-menu-item>Item 2</button>
</mat-menu>

Answer 2

根据 documentation

The <mat-menu> element does not render anything. It is opened via application of the matMenuTriggerFor directive.

在你的例子中，我想你想隐藏 menu 按钮而不是

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

这是 StackBlitz 上的演示。

fxShow 和 fxHide 不是 hiding/showing 导航菜单

fxShow and fxHide are not hiding/showing nav menu

angular-flex-layout

angular