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

Question

你不能把一个<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 

话虽如此，分配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

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 上注册一个侦听器。