Angular中template variable与ngModel的使用场景咨询

优先用模板变量的场景 #

• 纯模板内的快速操作：不需要把数据同步到组件类，只是在模板里直接获取DOM元素、组件实例的状态或值时用。比如点击按钮直接弹出输入框的内容，不用把值存到组件变量里：

  <input #usernameInput type="text">
  <button (click)="alert(usernameInput.value)">显示输入内容</button>
  

• 跨模板元素交互：一个模板元素需要引用另一个元素的状态，比如表单提交时直接通过模板变量获取多个输入框的值，无需组件中转。
• 引用内置指令/组件实例：比如获取表单实例做状态校验，用#myForm="ngForm"就能拿到表单的实例对象，直接在模板里判断表单是否合法。

优先用ngModel的场景 #

• 双向数据同步需求：需要表单控件的值和组件类属性保持双向同步时用。比如输入框内容变化时自动更新组件里的用户信息，组件修改用户信息时输入框也跟着刷新：

  <input [(ngModel)]="user.name" type="text">
  

• 需要在组件内处理表单数据：用户输入的内容要提交后端、做格式转换或业务逻辑计算时，必须把数据同步到组件类，这时候ngModel是最直接的绑定方式。
• 模板驱动表单的验证配合：结合required、pattern等验证指令时，ngModel能让组件类或模板拿到控件的验证状态（比如是否合法、是否被修改），方便做提示或提交拦截。

两者可以结合使用 #

很多场景下两者可以配合，比如既用ngModel做数据绑定，又用模板变量获取控件的验证状态：

<input [(ngModel)]="user.email" #emailInput="ngModel" type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
<p *ngIf="!emailInput.valid && emailInput.touched">请输入正确格式的邮箱</p>

这里ngModel负责同步邮箱数据，模板变量emailInput拿到ngModel实例，用来判断验证状态并给出提示。

内容的提问来源于stack exchange，提问作者Ahmad Mujeeb