Angular Material2 菜单内的滑动切换答案

【问题标题】：Angular Material2 Slide-toggle inside MenuAngular Material2 菜单内的滑动切换
【发布时间】：2018-06-16 09:24:54
【问题描述】：

是否有任何正确的方法可以在菜单 <mat-menu> 内显示滑动切换 <mat-slide-toggle>

此外，当我点击滑动切换时，菜单会消失。有什么办法可以防止这种情况发生。

<mat-menu #menuSettings="matMenu">
    <button mat-menu-item>
      <mat-icon>account_circle</mat-icon>
      <span>Dark</span>
      <mat-slide-toggle></mat-slide-toggle>
    </button>
    <button mat-menu-item>
      <mat-icon>face</mat-icon>
      <span>Register now</span>
    </button>
</mat-menu>

【问题讨论】：

标签： angular material-design

【解决方案1】：

您可以通过将(click) = "$event.stopPropagation()" 添加到<mat-slide-toggle> 元素来做到这一点：

<mat-menu #menuSettings="matMenu">
    <button mat-menu-item>
      <mat-icon>account_circle</mat-icon>
      <span>Dark</span>
      <mat-slide-toggle (click)="$event.stopPropagation();"></mat-slide-toggle>
    </button>
    <button mat-menu-item>
      <mat-icon>face</mat-icon>
      <span>Register now</span>
    </button>
</mat-menu>

【讨论】：

我猜你的意思是把这个添加到 mat-menu 标签中可能会起作用
如果你把它放在 mat-menu 级别就不起作用了。如果您将它放在 mat-slide-toggle 中（理想情况下，作为单击处理程序中几个中的一个）但随后切换没有反映正确的值，则可以工作对我来说（但我使用 [checked] 对 ngrx 变量；YMMV 与 [(ngModel)] 或 [formControlName]）。