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

Posted 2023-03-05

【中文标题】Angular 材质：mat-menu 中的 CheckBox；黑暗主题的问题

【英文标题】：Angular Material: CheckBox in mat-menu; Problem with dark themes

【发布时间】：2019-07-29 22:03:13

【问题描述】：

您通常不能将<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>

stackblitz

结果：

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

<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

【讨论】：

根据github.com/angular/components/pull/14165，该角色仅控制菜单项上的 aria-role。添加一流的 mat-item-checkbox 元素将在未来的次要中出现，也许

【参考方案2】：

自 Angular Material 11 以来，Marshal 引入的 class="mat-menu-item" Workaround 似乎已被破坏。您可以通过在 div 包装您的 mat-checkbox 上应用 mat-menu-item 指令来修复它。

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

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

【讨论】：

你说得对，要添加点击行为，你可以像这样注册（点击）： (click)="$event.preventDefault(); filterCheck._inputElement.nativeElement.click()"

应该是<div mat-menu-item> <mat-checkbox>Problem here</mat-checkbox> </div>

【参考方案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;
    
  

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