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

创建自定义指令并实现双向数据绑定步骤

创建指令：使用Angular CLI 命令 ng generate directive <directive - name> 生成指令文件，如 my - directive.ts。
导入必要模块：在指令文件中导入 ElementRef、Renderer2、Input、Output、EventEmitter 等模块。
定义双向绑定属性：使用 @Input() 装饰器定义输入属性，使用 @Output() 装饰器定义输出属性，并结合 EventEmitter 来触发变化。例如：

import { Directive, ElementRef, Renderer2, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  @Input() appMyDirective: any;
  @Output() appMyDirectiveChange = new EventEmitter<any>();

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  // 处理双向绑定逻辑的方法
  updateValue(newValue: any) {
    this.appMyDirective = newValue;
    this.appMyDirectiveChange.emit(this.appMyDirective);
  }
}

在模板中使用指令：在组件模板中，使用指令选择器并绑定输入输出属性。例如：

<input type="text" appMyDirective [(appMyDirective)]="myValue">

在组件中定义数据：在组件的 ts 文件中定义 myValue 变量。

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

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html',
  styleUrls: ['./my - component.css']
})
export class MyComponent {
  myValue = '';
}

双向数据绑定在提升用户交互体验方面的作用

实时反馈：用户在输入框输入内容时，组件的数据会立即更新，同时视图也会实时反映数据的变化。例如在一个搜索框中输入关键词，搜索结果会实时根据输入的关键词进行过滤展示，无需用户手动触发操作。
操作连贯性：用户在表单等交互元素上进行操作时，双向数据绑定使得数据与视图同步变化，用户无需额外步骤确认修改。比如在一个用户信息编辑表单中，修改姓名、年龄等字段，提交时数据就是最新的，无需用户再去确认或者二次修改。
增强用户控制感：双向数据绑定让用户直观地看到自己操作带来的结果，增加了用户对应用的控制感。例如在一个滑块（slider）组件中，拖动滑块改变数值，数值会实时显示在旁边，用户能立即知道自己操作产生的影响。

星途面试题库

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

知识考点

面试题答案

创建自定义指令并实现双向数据绑定步骤

双向数据绑定在提升用户交互体验方面的作用