Angular mat-menu出现在页外

Question

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

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

就像他们的示例一样，我只包含了必要的 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>

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

非常感谢！

Answer 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 。

这是一个官方的定位指南