Question

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

我基于此示例： Mat-Menu Example

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

<header role="navigation">
  <div id="navbar">

    <a href="/dashboard" id="home"><mat-icon>home</mat-icon></a>
    <a id="profile" [matMenuTriggerFor]="menu"><mat-icon>person</mat-icon></a>

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

  </div>
</header>

mat菜单会打开，并且（（类别为cdk-overlay-container的div）会附加到左下角，而不是被锚定到“个人资料链接”并在其右侧打开。

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

Answer 1

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

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

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

1 个答案: