Angular2+如何不使用ngModel获取复选框的选中状态值

不用ngModel也能轻松拿到复选框的选中状态，给你两种简单直接的方案：

方案一：利用事件对象$event #

直接在click事件里传递$event参数，然后在方法里通过事件目标元素获取checked值：

模板代码：

<input type="checkbox" (click)="foo($event, bar)">

组件代码：

public foo(event: Event, bar: any) {
  // 把事件目标断言为HTMLInputElement，才能访问checked属性
  const isChecked = (event.target as HTMLInputElement).checked;
  console.log(bar, isChecked); // 这里就能输出bar和对应的选中状态true/false
}

方案二：使用模板引用变量 #

给复选框加一个模板引用变量（比如#checkbox），直接把它的checked属性作为参数传给方法：

模板代码：

<input type="checkbox" #checkbox (click)="foo(checkbox.checked, bar)">

组件代码：

public foo(isChecked: boolean, bar: any) {
  console.log(bar, isChecked); // 直接拿到选中状态，不用处理事件对象，更简洁
}

两种方案都不需要额外声明组件字段，完美避开ngModel的使用，按需选择就行~

内容的提问来源于stack exchange，提问作者Vala Khosravi