使用 mat-menu-item 时让 mat-icon-button 在正确的位置呈现？

Question

当我们将button mat-icon-button 与mat-menu 相关联时，按钮会进一步向左移动。

如果它没有与 mat-menu 关联，我们如何让它在相同的位置呈现。

This is a demo.

如果我们注释掉：

    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Guides</button>
      <button mat-menu-item>Concepts</button>
      <button mat-menu-item>Tasks</button>
      <button mat-menu-item>Formulas</button>
    </mat-menu>

并将其替换为：

    <button mat-icon-button>
      <mat-icon>more_vert</mat-icon>
    </button>

如果没有关联的mat-menu，我们可以看到按钮呈现在哪里。

Answer 1

只需翻转元素的顺序：

    <mat-menu #menu="matMenu">
      <button mat-menu-item>Guides</button>
      <button mat-menu-item>Concepts</button>
      <button mat-menu-item>Tasks</button>
      <button mat-menu-item>Formulas</button>
    </mat-menu>
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>