面试题：Angular模板驱动表单中ngModel指令的双向绑定原理及应用

Question

在Angular模板驱动表单里，ngModel指令用于实现双向绑定。请阐述ngModel双向绑定是如何工作的？并举例说明如何使用ngModel指令在一个文本输入框中实现双向数据绑定，同时展示如何通过ngModel获取和设置表单控件的值。

Answer 1

ngModel双向绑定工作原理

1. 从模型到视图：当组件中的数据模型发生变化时，Angular会检测到这个变化，并将新的值更新到与之绑定的视图元素上。这是通过Angular的变更检测机制实现的，它会遍历组件树，检查数据绑定并更新DOM。
2. 从视图到模型：当用户在视图中对与ngModel绑定的表单控件进行操作（例如在输入框中输入内容）时，Angular会捕获该事件，并将新的值同步到组件的数据模型中。这通常是通过表单控件的valueChange事件来实现的。

使用ngModel在文本输入框中实现双向数据绑定示例

假设我们有一个简单的Angular组件：

1. 组件模板（.html文件）：

<input type="text" [(ngModel)]="userInput" name="userInput">
<p>你输入的内容是: {{userInput}}</p>

这里[(ngModel)]是双向绑定语法糖，它等价于[ngModel]="userInput"（从模型到视图绑定）和(ngModelChange)="userInput = $event"（从视图到模型绑定）。name属性是为了让ngModel能够在表单中正常工作，尤其是在使用表单验证时。

2. 组件类（.ts文件）：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  userInput: string = '';
}

在组件类中，我们定义了一个userInput属性，它将与输入框进行双向绑定。初始值为空字符串。

通过ngModel获取和设置表单控件的值

1. 获取值：在上面的示例中，当用户在输入框中输入内容时，userInput的值会自动更新。我们可以在组件的其他方法中直接使用这个值。例如：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  userInput: string = '';

  logInputValue() {
    console.log('输入框的值是: ', this.userInput);
  }
}

在模板中添加一个按钮来调用这个方法：

<input type="text" [(ngModel)]="userInput" name="userInput">
<button (click)="logInputValue()">打印输入值</button>
<p>你输入的内容是: {{userInput}}</p>

2. 设置值：我们可以在组件的方法中直接修改userInput的值，从而更新输入框的显示。例如：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  userInput: string = '';

  setInputValue() {
    this.userInput = '设置的新值';
  }
}

在模板中添加一个按钮来调用这个方法：

<input type="text" [(ngModel)]="userInput" name="userInput">
<button (click)="setInputValue()">设置输入值</button>
<p>你输入的内容是: {{userInput}}</p>

这样，当点击按钮时，输入框的值会被设置为设置的新值。