出现在页面外的角垫菜单答案

【问题标题】：Angular mat-menu appearing outside page出现在页面外的角垫菜单
【发布时间】：2021-02-06 00:15:19
【问题描述】：

我正在使用 Angular 8 开发一个我想使用自定义上下文菜单的应用程序。为此，我使用 Material v8.2.3，并尝试从here 实现基本示例。

但是，现在单击按钮时，上下文菜单会显示在页面底部，而不是单击位置（或按钮上）。任何想法为什么会发生这种情况？（见附件image）

与他们的示例非常相似，我只包含了必要的 HTML（尝试将其包装在 div 中但没有任何区别）：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

我使用了与示例中完全相同的导入和导出。

非常感谢！

【问题讨论】：

你能在上面创建一个stackblitz[stackblitz.com/edit/angular]吗？

标签： angular angular-material

【解决方案1】：

items 没有空间显示，但您可以“玩”属性xPosition 和yPosition

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" yPosition="below">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

您也可以使用class 并设置margin-top。

Here is an official guide for positioning

【讨论】：