Angular 4：输入激活时如何在控制器中获取[(ngModel)]名称

好问题！直接通过点击事件的$event确实拿不到[(ngModel)]绑定的表达式名称（比如你示例里的docData.docNum），因为原生事件对象只包含浏览器DOM相关的信息，不携带Angular模板的绑定元数据。不过有两种实用的方案可以解决这个需求：

方案1：直接在事件调用时传入绑定名称 #

这是最直观简单的方案，不需要额外的复杂逻辑，直接在模板里把[(ngModel)]的绑定字符串作为参数传给你的focusFunction：

模板代码 #

<input type="text" id="docno" class="form-control" 
       (click)="focusFunction($event, 'docData.docNum')" 
       [(ngModel)]="docData.docNum" required>

组件控制器代码（.ts文件） #

focusFunction(event: MouseEvent, ngModelName: string) {
  // 这里就能拿到你需要的ngModel绑定名称了
  console.log('当前激活的ngModel名称:', ngModelName); 
  // 同时可以处理点击事件的其他逻辑
}

这个方案的优势是快速实现，适合单个或少量输入框的场景，不需要引入额外的Angular特性。

方案2：自定义指令实现复用 #

如果你的项目中有大量输入框需要这个功能，不想每个都手动传参，可以自定义一个指令来自动捕获[(ngModel)]的绑定表达式，并在输入框激活时通知组件：

第一步：创建自定义指令 #

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

@Directive({
  selector: '[ngModel][trackNgModelFocus]'
})
export class TrackNgModelFocusDirective {
  // 通过@Input()接收ngModel的绑定表达式字符串
  @Input('ngModel') ngModelBinding: string;
  // 定义输出事件，把绑定名称传递给组件
  @Output() ngModelFocused = new EventEmitter<string>();

  // 监听输入框的focus事件
  @HostListener('focus')
  onInputFocus() {
    this.ngModelFocused.emit(this.ngModelBinding);
  }
}

第二步：在模块中声明指令 #

确保你把这个指令添加到对应的Angular模块的declarations数组中，这样模板才能识别它。

第三步：在模板中使用指令 #

<input type="text" id="docno" class="form-control" 
       trackNgModelFocus
       (ngModelFocused)="focusFunction($event)" 
       [(ngModel)]="docData.docNum" required>

组件控制器代码 #

focusFunction(ngModelName: string) {
  console.log('当前激活的ngModel名称:', ngModelName);
}

这个方案的优势是复用性强，一次定义后可以在所有需要的输入框上使用，避免重复代码。

补充说明 #

为什么直接通过$event拿不到？因为Angular的DOM事件对象（$event）是浏览器原生的MouseEvent/FocusEvent实例，只包含和DOM交互相关的信息（比如目标元素、点击坐标等），不会存储Angular模板中绑定的表达式字符串这类框架层面的元数据，所以必须通过上述两种方式主动传递或捕获这个信息。

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