angular - Angular 材质：mat-menu 中的 CheckBox；黑暗主题的问题

Question

你不能正常地把 a 放进<mat-checkbox>去<mat-menu>。如果是这样，深色主题不适用于您的文本部分<mat-checkbox> （见最后的图片）。

关于<mat-label>s 也有类似的问题。但解决方案很简单：

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

同样关于buttons。

---

但是我找不到<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>

堆栈闪电战

结果：

Answer 1

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

<!-- 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类而不是指令可能是一种可行的解决方法。

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

堆栈闪电战

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

Answer 2

由于 Angular Material 11 class="mat-menu-item"，Marshal 引入的解决方法似乎被打破了。您可以通过将mat-menu-item指令应用于div包装您的mat-checkbox.

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

请注意，该复选框现在仅在您准确单击复选框时触发，而不是在您按下菜单项的任何其他位置时触发。这只会导致点击动画。要解决此问题，您可以(click)="..."在包装 div 上注册一个侦听器。

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)这样 mat 菜单的键盘控件仍然可以正常工作。我们还注册了一个单击事件，因此如果用户单击菜单项的右边缘或左边缘，它将切换复选框。 $event.stopPropagation()在这里是为了防止菜单在用户与复选框交互时关闭。

然后将以下内容添加到您的样式表中：

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

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