角材料：垫菜单中的复选框；黑暗主题的问题

Question

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

关于<mat-label>，存在类似的问题。但是解决方案很简单：

• 使用 <label mat-menu-item> ，而不是 < / em> <mat-label> 。

大约button s。

---

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

<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 here}

结果：

Answer 1

自 Angular Material 11 起，Marshal 引入的 class="mat-menu-item" 解决方法似乎已失效。您可以通过在包装您的 mat-menu-item 的 div 上应用 mat-checkbox 指令来修复它。

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

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

Answer 2

似乎有一种方法可以将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 

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

<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