Angular技术问询：如何确定触发dateChanged事件的日期选择器控件

嘿，我来帮你理清这个问题～首先先纠正下你对模板引用变量#的误解：它不是DOM元素的id，而是Angular模板里的局部引用，用来在模板内部或者组件类中快速访问对应的DOM元素、指令或组件实例，和原生的id完全是两回事哦。

回到你的问题，下面几种方式可以解决判断触发控件的需求，咱们挨个说：

1. 事件绑定直接传标识/控件实例（最推荐） #

这是最简单也最符合Angular风格的方式，不需要依赖DOM id或者额外的视图引用。你可以在绑定dateChanged事件时，直接给每个控件传一个自定义标识，或者直接把控件本身传进去：

模板代码： #

<!-- 方式1：传自定义标识 -->
<input type="date" (change)="dateChanged('startDate', $event)">
<input type="date" (change)="dateChanged('endDate', $event)">

<!-- 方式2：直接传控件实例 -->
<input type="date" #startPicker (change)="dateChanged(startPicker, $event)">
<input type="date" #endPicker (change)="dateChanged(endPicker, $event)">

组件类代码： #

// 对应方式1的处理逻辑
dateChanged(controlId: string, event: Event) {
  console.log(`触发事件的是：${controlId}`);
  // 后续逻辑根据controlId区分即可
}

// 对应方式2的处理逻辑
dateChanged(control: HTMLInputElement, event: Event) {
  console.log(`触发事件的控件id：${control.id}`);
  // 甚至可以直接操作这个控件实例
}

这种方式完全不需要依赖DOM id，逻辑清晰，也不会有耦合问题，非常适合你的场景。

2. 使用DOM id的方式：可行但不推荐 #

你现在用的给input加id然后在事件里通过$event.target.id判断的方式，确实能正常工作，但它更偏向原生JS的写法，不是Angular推荐的最佳实践。因为这种方式把组件逻辑和DOM的id绑定在了一起，如果后续修改id，对应的事件处理逻辑也要跟着改，维护成本会变高。

3. ViewChild：确实有点大材小用 #

ViewChild主要用于在组件类中获取模板里的元素、指令或组件实例，比如需要调用控件的方法（比如设置默认值、禁用控件）或者访问其属性时才会用到。如果只是单纯判断哪个控件触发了事件，用ViewChild就显得冗余了——你需要先定义模板引用变量，再在组件类中注入，最后在事件里对比实例，步骤繁琐，完全没必要。

总结 #

优先选择事件绑定传标识/控件实例的方式，简单高效还符合Angular的设计思路；用id的方式可以凑合用，但不推荐；ViewChild在这里确实属于“杀鸡用牛刀”，没必要用。

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