angular - MatCheckbox preventDefault() 和 event.checked 值

Question

我怎样才能实现一个 Material 复选框，这样它就不会在默认情况下被选中/取消选中(例如，在事件上调用 preventDefault())并且还得到 checked 事件的值(value)？

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

堆栈 Blitz :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) 事件打印出值但将传播事件。

相关问题:

• https://github.com/angular/material2/issues/1142
• https://github.com/angular/angular/issues/2042
• https://github.com/angular/material2/issues/13156

Answer 1

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

如果你用 still check 击中 'Space'，那么 (click) 是不够的，你还需要包括 (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();
    }
  }