如何在 Angular 中的 position 材料菜单？

Question

我的顶部导航栏右上角有一个按钮。 该按钮只是打开一个垫子菜单。 我想在特定的 position 处打开那个垫子菜单，比如在屏幕中间，我该怎么做 go 呢？

我在menuOpened()和按钮的onClick()方法中尝试了下面的这段代码，似乎没有任何效果，当我打开 mat 菜单时，顶部、高度、宽度等都被覆盖了。

menuOpened() {
        console.log('Menu is open');
        var x: HTMLElement = document.querySelector("div.cdk-overlay-connected-position-bounding-box");
        console.log(x);
        x.style.left= "50%";
        x.style.top= "50%";
        console.log(x.style.top);
        console.log(x);
      }

Answer 1

根据 Angular Material 的文档：

position 可以使用 xPosition（之前 | 之后）和 yPosition（上 | 下）进行更改

所以 position 只能更改为创建它的元素周围的直接区域。

您可能对对话框感兴趣。 它们允许完全控制在其中创建它们的 position。

Answer 2

根据文档，MatMenu 有以下输入：

@Input('class')
panelClass: string

你可以尝试类似的东西

<mat-menu #menu="matMenu" [class]="'your-class'">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

请注意，使用组件的 CSS/SCSS 文件中的默认ViewEncapsulation设置.your-class将不起作用。 You need to either set component's encapsulation to ViewEncapsulation.None (I wouldn't recommend that approach as it makes your component styles affect other elements), use ::ng-deep ( ref ) or add the styles to styles.scss .