如何在Angular Material中使用mat-slide-toggle的MatSlideToggleChange

Question

我正在尝试使用表单中的开关来切换相同表单中两个下拉菜单之一的外观.我相信这意味着我想使用MatSlide切换发出的MatSlideToggleChange类.遗憾的是,该文档未提供如何将MatSlideToggleChange类与MatSlide一起使用的示例.

有没有人以这种方式使用MatSlide？

Answer 1

您可以使用输出更改属性来更改其更改值

<mat-slide-toggle
   [(ngModel)]="checked"
   class="example-margin"
   [color]="color"
   (change)="changed()">
     Slide me! {{checked}}
</mat-slide-toggle>

零件

color = 'accent';
checked = false;

  changed(){
    console.log(this.checked)
  }

演示stackblitz

Answer 2

MatSlideToggleChange 有两个字段：

source: MatSlideToggle
checked: boolean

在 .html 文件中

<mat-slide-toggle
   (change)="onChange($event)">
</mat-slide-toggle>

在 .ts 文件中

onChange($event: MatSlideToggleChange) {
    console.log($event);
}

你会在控制台中得到这样的输出：

MatSlideToggleChange {source: MatSlideToggle, checked: false}

如果您正在考虑使用(click)事件而不是(change)事件，我建议您(change)在用户拖动mat-slide-toggle. 您基本上只是检查 $event 的值，它是一个MatSlideToggleChange.