MatCheckbox preventDefault() 和 event.checked 值答案

【问题标题】：MatCheckbox preventDefault() and event.checked valueMatCheckbox preventDefault() 和 event.checked 值
【发布时间】：2018-09-17 09:11:18
【问题描述】：

如何实现 Material 复选框，使其默认不会被选中/取消选中（例如，在事件中调用 preventDefault()）并从事件中获取 checked 值？

看来我只能达到其中一个条件。使用(click) 事件我无法获取复选框的值，而使用(change) 事件我无法阻止默认复选框值的更改（如果基础HTTP 请求成功，我只会更改复选框值）。

Stackblitz：https://stackblitz.com/edit/matcheckbox-checked

<mat-checkbox 
  [checked]="checked"   
  (click)="onClick($event)"
>onClick me!</mat-checkbox>

<br/>

<mat-checkbox 
  [checked]="checked"
  (change)="onChange($event); false"
>onChange me!</mat-checkbox>

export class CheckboxOverviewExample {
  checked: boolean = false;

  onClick(event) {
    event.preventDefault();
    console.log('onClick event.checked ' + event.checked);
    console.log('onClick event.target.checked '+event.target.checked);
  }

  onChange(event) {
    // can't event.preventDefault();
    console.log('onChange event.checked '+event.checked);
  }
}

(click) 事件打印 undefined 值，但成功阻止事件传播，(change) 事件打印值但将传播事件。

相关问题：

【问题讨论】：

你想禁用复选框？
@Chellappan 不，我想手动更改复选框的值（选中或未选中）。

标签： angular typescript event-handling angular-material2

【解决方案1】：

您可以使用组件中的提供程序来阻止对“更改”的默认操作：

providers: [{
    provide: MAT_CHECKBOX_DEFAULT_OPTIONS, 
    useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions
}]

（来源：https://material.angular.io/components/checkbox/overview#noop）

你可以将checked绑定到一个局部变量（或getter函数）

<mat-checkbox
(click)="changeValue()"
[checked]="theValue"
>
   Whatever
</mat-checkbox>

因此，例如，在代码中，您使用 theValue 作为值，并以编程方式设置该值。这样就不需要接收checkbox状态作为click方法的参数，可以从theValue中访问。

theValue: boolean = false;

changeValue(): void {
    this.theValue = !this.theValue
}

【讨论】：

【解决方案2】：

如果你想手动选中复选框@ViewChild 获取元素的 ref 然后使用 checked 设置值 true 或 false 像这样

@ViewChild('ref') ref;

  onClick(bool){
    this.ref._checked=bool;
  }

例如：https://stackblitz.com/edit/matcheckbox-checked-ybru81

事件处理时的相同示例：https://stackblitz.com/edit/matcheckbox-checked-a1le6o

【讨论】：

【解决方案3】：

就我个人而言，我必须为鼠标和键盘事件编写代码，以防你关心你知道的可访问性:)

如果您仍然选中“空格”，那么（点击）是不够的，您还需要包括（keydown）。不仅如此，但在我解决了 Space 的问题后，我注意到它还会阻止我需要它使用键盘导航的 Tab，所以我只需要为此添加一些代码

      <mat-checkbox [checked]="descendantsAllSelected(node)" 
        [indeterminate]="descendantsPartiallySelected(node)"
        (click)="toggleDescendants(node,$event)"
        (keydown)="toggleDescendants(node,$event)"
        >
        {{node.name}}
      </mat-checkbox>

在代码中

  toggleDescendants(node, $event) {
    this._logger.debug('toggleDescendants()');
    this.treeControl.toggleDescendants(node);
    if ($event.code !== 'Tab') {
      $event.preventDefault();
    }
  }

【讨论】：

【解决方案4】：

尝试不确定

检查
切换复选框的选中值，忽略不确定值。如果复选框处于不确定状态，无论选中的值如何，该复选框都将显示为不确定的复选框。

检查不确定
mat-checkbox 的默认行为。当用户单击 mat-checkbox 时，始终将不确定设置为 false。这符合原生“input type="checkbox"”的行为

https://material.angular.io/components/checkbox/overview#-code-check-code-

【讨论】：

【解决方案5】：

我们无法控制复选框和事件属性的默认行为。您可以创建 2 个具有选中和未选中状态的图像图标，根据值进行切换。

【讨论】：