Angular Material2 在菜单中滑动切换

Question

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

此外，当我点击 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>

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>