0

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

我基于此示例： Mat-Menu 示例

我的标题组件 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 不会被锚定到 Profile Link 并在其右侧打开，而是打开并（带有 class 的 div cdk-overlay-container）附加到左下角。

如何通过打开它的链接将 mat-menu 保持在页面顶部？

4

1 回答 1

3

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

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

于 2018-12-07T10:50:42.307 回答