Angular Material2在菜单中滑动切换

Question

是否有任何正确的方式在菜单<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>

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