当下方空间不足时，Mat-menu 不会自动更改位置答案

【问题标题】：Mat-menu doesn't change position automatically when the is no enough space below当下方空间不足时，Mat-menu 不会自动更改位置
【发布时间】：2020-11-04 16:10:32
【问题描述】：

有没有办法在 mat-menu 放置在页面底部时自动更改 mat-menu 的位置，并且用户在 mat-menu 触发后动态隐藏/显示内容。

下面的截图显示了我现在拥有的：

mat-menu opened and content is not hidden

点击隐藏后会隐藏下方的文字

mat-menu opened and content is hidden

但它不会在隐藏文本后自动将菜单上移。只有重新打开此菜单后才能正确显示。

stackblitz 上的例子https://stackblitz.com/edit/angular-y9du61?file=src/app/menu-overview-example.html

P.S.：我停止传播 mat-menu 项单击，因此单击某些菜单项后菜单不会关闭。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

办公室。定位发生在显示之前。没有办法基于 API 进行后定位。此时，我建议点击后关闭菜单，然后从程序代码中重新打开。

【讨论】：

【解决方案2】：

安娜，解决问题的最简单方法是预定义菜单的起始位置。例如，您可以将位置 Y 定义为“上方”。隐藏文本不再破坏页面。请看documantation

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" yPosition="above">
    <button mat-menu-item (click)="$event.stopPropagation(); hidden = true">
    Hide
  </button>
    <button mat-menu-item (click)="$event.stopPropagation(); hidden = false">
    Show
  </button>
</mat-menu>

【讨论】：

是的，它可能会有所帮助，但在我的情况下，有必要在触发按钮下方显示菜单