面试题：Angular自定义指令中如何实现双向数据绑定

Question

在Angular的自定义指令开发中，要求实现一个双向数据绑定的自定义指令。该指令应用在输入框元素上，当输入框的值发生变化时，指令所在组件的某个属性值也跟着变化；反之，当组件的该属性值变化时，输入框的值也要相应更新。请描述实现思路并给出核心代码。

Answer 1

实现思路

1. 在指令中使用 ngModel 来处理双向数据绑定。ngModel 是Angular提供的用于双向数据绑定的指令，它内部处理了视图到模型和模型到视图的同步。
2. 通过 @Input() 装饰器接收来自组件的属性值，并将其绑定到输入框。
3. 监听输入框的 input 事件，当输入值变化时，更新组件的属性值。

核心代码

1. 创建自定义指令

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appMyTwoWayBinding]'
})
export class MyTwoWayBindingDirective {
  @Input('appMyTwoWayBinding') value: any;

  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    this.value = value;
  }
}

2. 在组件模板中使用指令

<input type="text" appMyTwoWayBinding [(appMyTwoWayBinding)]="componentProperty">

3. 在组件类中定义属性

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  componentProperty = '';
}

以上代码实现了在Angular中自定义指令的双向数据绑定功能，当输入框值改变时更新组件属性，组件属性改变时也更新输入框值。实际应用中可根据需求对指令和组件进一步完善。