时间戳

首页 > 解决方案 > Angular Material2 菜单内的滑动切换

angular - Angular Material2 菜单内的滑动切换

问题描述

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

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

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

在此处输入图像描述

标签： angularmaterial-design

解决方案

您可以通过添加(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>

推荐阅读