MatCheckbox preventDefault() 和 event.checked 值

Question

我怎样才能实现 Material 复选框，这样它就不会默认获得 checked/unchecked（例如，在事件中调用 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) 事件打印了值但会传播事件。

相关问题：

Answer 1

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

Answer 2

如果您想手动选中复选框，@ViewChild 获取元素的引用，然后使用 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

Answer 3

尝试不确定

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

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

的行为相匹配

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

Answer 4

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

如果你点击'Space'它仍然检查，所以（点击）是不够的，你还需要包括（keydown）。不仅如此，在我解决 Space 的问题后，我注意到它还会阻止我需要它使用键盘导航的选项卡，所以我只需要为此添加一些代码

      <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();
    }
  }

Answer 5

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

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

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

并且您可以将检查绑定到局部变量（或 getter 函数）

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

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

theValue: boolean = false;

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

MatCheckbox preventDefault() 和 event.checked 值

MatCheckbox preventDefault() and event.checked value

event-handling

typescript

angular-material2

angular