一页有两个 Mat-Menus，分别控制位置答案

【问题标题】：Two Mat-Menus on one page, control position for both separately一页有两个 Mat-Menus，分别控制位置
【发布时间】：2022-10-13 15:43:37
【问题描述】：

我在下面有这两个菜单。我想控制cdk-overlay-connected-position-bounding-box两个垫子菜单（它们的叠加层）的css属性并对齐一个菜单对齐项目：弹性开始；和另一个对齐项目：flex-end；

我尝试在本地 scss 文件中设置 align-item 属性。

.cdk-overlay-connected-position-bounding-box {
   align-items: start !important;
}

但这会覆盖两个菜单的 align-item 属性，因为 cdk-overlay 是一个共享类。我也尝试过使用两个单独的组件，但是！重要的编译后覆盖 css 并且两个菜单都有对齐项开始或结束。

如何分别隔离两个菜单的位置？请看the stackblitz link

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div>
    <button mat-button [matMenuTriggerFor]="menu">Menu One</button>
    <!-- #enddocregion mat-menu-trigger-for -->
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </div>
  <div>
    <button mat-button [matMenuTriggerFor]="menuTwo">Menu Two</button>
    <!-- #enddocregion mat-menu-trigger-for -->
    <mat-menu #menuTwo="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </div>
</div>

https://stackblitz.com/edit/angular-vgmphw?file=src/styles.scss

【问题讨论】：

标签： angular angular-material angular-material2 angular-cdk-overlay

【解决方案1】：

这可行，但它使您依赖于 mat-menu 的实现细节，这并不理想：

向两个菜单添加背景类输入

<div class="container">
<div>
    <button mat-button [matMenuTriggerFor]="menu">Menu One</button>
    <!-- #enddocregion mat-menu-trigger-for -->
    <mat-menu #menu="matMenu" [backdropClass]="'first'">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
    </mat-menu>
</div>
<div>
    <button mat-button [matMenuTriggerFor]="menuTwo">Menu Two</button>
    <!-- #enddocregion mat-menu-trigger-for -->
    <mat-menu #menuTwo="matMenu" [backdropClass]="'second'">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
    </mat-menu>
</div>
</div>

使用相邻的同级组合符 (+) 定位正确的菜单

.first+.cdk-overlay-connected-position-bounding-box {
    align-items: start !important;
    background-color: blue !important;
}

.second+.cdk-overlay-connected-position-bounding-box {
    align-items: end !important;
    background-color: green !important;
}

堆栈闪电战：https://stackblitz.com/edit/angular-vgmphw-bqqjau

【讨论】：