Angular Material：mat-menu中的CheckBox；黑暗主题的问题

Question

通常不能将 <mat-checkbox> 放在 <mat-menu> 中。如果是这样，深色主题不适用于您的 <mat-checkbox> （见最后的图片） 的 文本部分 。

大约 <mat-label>s 有一个类似的问题。但解决方法很简单：

使用<label mat-menu-item>代替<mat-label>.

大约 button 秒。

但我找不到 <mat-checkbox>es 的类似解决方案！这些都是我测试过的状态：

<mat-menu #menu="matMenu">
  <mat-label>Bad label</mat-label>
  <label mat-menu-item>OK label</label>
  <mat-checkbox>Problem here</mat-checkbox>
  <!-- ERROR:
  <mat-checkbox  mat-menu-item>
    Template parse errors:
More than one component matched on this element.
  </mat-checkbox>
  -->
  <br><mat-checkbox></mat-checkbox>
  <label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>

stackblitz

结果：

Answer 1

似乎有一种方法可以在 mat-menu-item 指令上将 menuitemcheckbox 分配给 role 输入...不幸的是，我不清楚它应该如何工作。 ..

<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
  <button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
  <button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not </button>

话虽如此，分配 mat-menu-item class 而不是指令可能是一个可行的解决方法。

<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>

Stackblitz

https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html

Answer 2

自 Angular Material 11 起，Marshal 引入的 class="mat-menu-item" 解决方法似乎已失效。您可以通过在包装 mat-checkbox.

的 div 上应用 mat-menu-item 指令来修复它

<div mat-menu-item>
  <mat-checkbox>Problem here</mat-checkbox> 
</div>

请注意，现在仅当您准确单击复选框时才会触发复选框，而不会在您按下菜单项的任何其他位置时触发。这只会导致点击动画。要解决此问题，您可以在包装 div.

上注册一个 (click)="..." 侦听器

Answer 3

详细说明 Aki 的回答：

<div mat-menu-item (click)="$event.stopPropagation(); cb.toggle()" (keydown.enter)="$event.stopPropagation(); cb.toggle()">
  <mat-checkbox class="mat-menu__checkbox" (click)="$event.stopPropagation()" #cb>Problem No Longer Here</mat-checkbox>
</div>

包装器 div 需要 (keydown.enter) 以便垫子菜单的键盘控件仍能正常工作。我们还注册了一个点击事件，因此如果用户点击菜单项的右边缘或左边缘，它将切换复选框。 $event.stopPropagation() 用于防止菜单在用户与复选框交互时关闭。

然后将以下内容添加到您的样式中 sheet:

.mat-menu__checkbox {
  height: 100%;
  &::ng-deep .mat-checkbox-layout {
    height: 100%;
    &::ng-deep .mat-checkbox-label {
      margin: auto;
      vertical-align: middle;
      position: relative;
    }
  }
}

此样式将使垫子复选框的标签成为菜单项的整个高度，并使其垂直居中。这使得复选框可以在任何地方单击并触发。

Angular Material：mat-menu中的CheckBox；黑暗主题的问题

Angular Material: CheckBox in mat-menu; Problem with dark themes

angular

checkbox

menu

angular-material

menu-items