Angular 4元素状态获取及绑定基础问题：无ngModel实现复选框控制输入

1. 如何在Angular 4中获取元素的状态？ #

在Angular 4里获取元素状态，常用的有这几种实用方式，我给你拆解下：

• 通过模板引用变量 + @ViewChild 获取DOM元素
  这是最直接的方案，先在模板里给目标元素加个引用标记，再在组件类里用@ViewChild拿到元素引用，就能直接访问它的状态属性了。比如获取复选框的选中状态：

  组件代码示例：

  import { Component, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'app-element-state',
    template: `<input type="checkbox" #myCheckbox name="test">
               <button (click)="checkCheckboxState()">查看复选框状态</button>`
  })
  export class ElementStateComponent {
    @ViewChild('myCheckbox') myCheckbox: ElementRef;
  
    checkCheckboxState() {
      // 访问原生元素的checked属性获取选中状态
      const isChecked = this.myCheckbox.nativeElement.checked;
      console.log(`复选框当前状态：${isChecked ? '已选中' : '未选中'}`);
    }
  }
  

• 通过表单控件实例获取（表单场景适用）
  如果你的元素是表单的一部分，也可以通过模板驱动表单或响应式表单的控件实例来获取状态，比如模板驱动表单里用#myForm="ngForm"，然后访问控件的valid、touched等状态，但这种方式更适合复杂表单场景。

2. 不使用ngModel实现复选框控制输入框显示 #

当然可以不用ngModel！我们可以通过事件绑定 + 组件属性轻松实现这个需求，给你两种方案：

方案一：组件类处理事件逻辑 #

先在组件里定义一个布尔属性控制输入框显示，然后给复选框绑定change事件，在事件处理方法里更新这个属性：

组件代码示例：

import { Component } from '@angular/core';

@Component({
  selector: 'app-checkbox-toggle',
  template: `
    <input type="checkbox" name="test" (change)="toggleUserInput($event)">
    <input name="user" *ngIf="showUserInput" placeholder="请输入用户名">
  `
})
export class CheckboxToggleComponent {
  // 初始状态：隐藏输入框
  showUserInput = false;

  toggleUserInput(event: Event) {
    // 从事件对象中获取复选框元素
    const checkbox = event.target as HTMLInputElement;
    // 根据复选框状态更新输入框显示状态
    this.showUserInput = checkbox.checked;
  }
}

方案二：模板内直接绑定（更简洁） #

还可以省去组件类的方法，直接在模板里通过模板引用变量完成状态绑定：

<input type="checkbox" name="test" #testCheckbox (change)="showUserInput = testCheckbox.checked">
<input name="user" *ngIf="showUserInput">

这里给复选框加了模板引用变量#testCheckbox，当change事件触发时，直接把复选框的checked值赋值给组件的showUserInput属性，*ngIf就会根据这个属性的值自动切换输入框的显示/隐藏。

两种方式都完全不需要用到ngModel，完美满足你的需求~

内容的提问来源于stack exchange，提问作者Rajar R