Question

我需要创建一个切换按钮。我需要防止切换按钮的默认行为（即点击选中/取消选中）。因此，我在复选框Click事件上应用了 preventDefault 。现在，我更新复选框 [已检查] 属性。但什么也没发生。

HTML

<input type="checkbox" [checked]="isChecked" (change)="toggleChange()">

TS

@HostListener('click', ['$event'])
  onClick($event) {
    this.callback.emit();
    $event.preventDefault();
  }

  @Input() isChecked;
  @Output() callback = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // check isChecked value
    console.log(changes);
  }

  toggleChange() {
    this.callback.emit();
  }

请检查https://stackblitz.com/edit/angular-cyp9jz

Answer 1

export class AppComponent  {
  isChecked: boolean = false;
  name = 'Angular';

  toggleCallback() {
    this.isChecked = !this.isChecked;
  }
}

使用布尔类型并初始化值

export class ToggleButtonComponent implements OnInit, OnChanges {

  @Input() isChecked: boolean;
  @Output() callback = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // check isChecked value
    console.log(this.isChecked);
  }

  toggleChange() {
    this.callback.emit();
  }

}

还删除Hostlistener，您不需要它，因为您在change事件上调用了 toggleChange（）。

Answer 2

代替交换价值

使用此

    <input type="checkbox" [checked]="isChecked" (change)="toggleChange($event)">

代码

toggleChange(event): void {
      console.log(event.checked)
  }

[选中]属性更新时，复选框未选中/取消选中

2 个答案: