菜单内的 Angular Material Slide-toggle

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>