如何使用 Material Design 在 Angular 6 中更改 mat-menu 的位置？答案

【问题标题】：How can I change position of mat-menu in Angular 6 with Material Design?如何使用 Material Design 在 Angular 6 中更改 mat-menu 的位置？
【发布时间】：2019-01-26 23:52:55
【问题描述】：

我正在尝试使用 @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-menu 不会被锚定到配置文件链接并在其右侧打开，而是打开并且 (div with class cdk-overlay-container) 附加到左下角。

如何将垫子菜单保持在打开它的链接旁边的页面顶部？

【问题讨论】：

你想改变菜单的位置，比如向右还是向左？

标签： angular angular-material material-design angular-material-6

【解决方案1】：

我遇到了和你一样的问题，但我找到了解决办法。
我注意到调试窗口'Could not find Angular Material core theme.' 中有一个警告。所以我添加了一个随机的，它错误地解决了错误的下拉问题。
当您考虑它时，它是有道理的。几乎所有的外观“n”感觉都嵌入在样式中，也嵌入在布局行为中。所以尝试在 styles.css 文件中添加你想要的任何材质主题，看看它是否有效，
例如：
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

抱歉，这个答案可能为时已晚，但供将来参考，这可能会对某人有所帮助。

【讨论】：