角度/材质 6 菜单仅在左上角打开

Question

我已升级到

[email protected]

、

angular/[email protected]

、

[email protected]

我的工作应用程序现在在左上角打开菜单，而不是绑定到触发器。 我运行了默认的

cli

安装并将其添加到

app.component.html

<button mat-fab color="primary"  [matMenuTriggerFor]="menu">Menu</button>
<mat-menu class="myMenu" #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

MatMenuModule

已导入。我能够移动打开的菜单的唯一方法是通过这个

css

，这是一个可怕的组装。

.myMenu {
    position: absolute;
    top: calc(figure out using nnvh - nnpx);
    left: calc(figure out using nnvw - nnpx);
}

唯一的问题是菜单的位置 - 所有这些都工作得很好

@5.x.x

。现在我的工作应用程序似乎已损坏。

Answer 1

确保还使用material/prebuilt-themes目录中提供的最新材质CSS文件，因为现在似乎需要以下类才能使菜单正常工作：

.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;}

Answer 2

我缺少基本的 Angular 材质设置。将以下行添加到我的

styles.scss

解决了问题：

@import '~@angular/material/theming';
@include mat-core();

请务必查看您正在使用的 Angular Material 版本的设置文档。

• 入门 (v11)
• 主题 (v11)

Answer 3

对我来说，我需要添加这个类才能避免这个问题：

.cdk-overlay-pane {
   position: absolute;
}