如何使用Material Design更改Angular 6中Mat-menu的位置？

How can I change position of mat-menu in Angular 6 with Material Design?

我正在尝试使用@ Angular / Material，专门用于Angular 6应用程序中的标头。

我基于此示例：
垫菜单示例

我的标头组件HTML如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<header role="navigation">

<mat-icon>home</mat-icon>
<mat-icon>person</mat-icon>

<mat-menu #menu="matMenu" x-position="above">
<button mat-menu-item (click)="switchAccounts()">
<mat-icon>people</mat-icon>
<span>Switch Account</span>
</button>
<button mat-menu-item (click)="editProfilePage()">
<mat-icon>edit</mat-icon>
<span>Edit Profile</span>
</button>
<button mat-menu-item (click)="logout()">
<mat-icon>power_settings_new</mat-icon>
<span>Log Out</span>
</button>
</mat-menu>

</header>

而不是将其锚定到"配置文件链接"并在其右侧打开，而是打开了mat-menu，并且(类别为cdk-overlay-container的div)追加到了左下角。

如何将打开菜单的链接保持在页面顶部？

相关讨论

我遇到了与您相同的问题，但是找到了解决方案。
我在调试窗口'Could not find Angular Material core theme.'中注意到一条警告。所以我添加了一个随机数，它错误地解决了错误方面的问题。
当您考虑它时，这是有道理的。几乎所有的" n"外观都嵌入样式中，但布局行为也是如此。
因此，请尝试在styles.css文件中添加所需的任何主题，以查看其是否有效，例如：
@import"~@angular/material/prebuilt-themes/deeppurple-amber.css";

抱歉，这个答案可能太迟了，但是对于将来的参考可能会对别人有所帮助。