Angular同组件多实例下子组件事件触发错误父组件问题排查

问题成因 #

• 两个<my-widget>实例使用了重复的id属性，若组件内部存在通过document.getElementById等全局DOM选择器操作元素的逻辑，会默认匹配到第一个符合id的元素，导致操作目标错位。
• myItems为数组/对象这类引用类型数据，若两个组件实例共享同一份数据引用（比如数据存放在root层级的公共服务、或直接引用组件外定义的同一个变量），修改任意实例的下拉数据都会同步到另一个实例。
• afterSelectionChanged1/afterSelectionChanged2回调逻辑中使用了全局DOM选择器修改状态，没有基于当前组件的局部模板引用（如#Dropdown1、#Dropdown2）操作，导致修改落到第一个匹配的组件上。
• 若my-dropdown组件本身的选中状态存放在全局变量或root层级服务中，没有和父组件实例绑定，也会出现状态串用的问题。

修复方案 #

1. 首先给两个<my-widget>分配唯一的id，避免全局选择器匹配错误：

<my-widget id="myWidget1" isfullscreen="false"></my-widget>
<my-widget id="myWidget2" isfullscreen="true"></my-widget>

2. 确保每个my-widget实例持有独立的myItems数据：如果数据存放在公共服务中，将对应服务添加到my-widget组件的providers配置项中，保证每个组件实例生成独立的服务副本；如果是外部传入的引用类型数据，可在组件内部对传入值做深拷贝生成独立状态。
3. 调整下拉框选中回调的逻辑：所有状态修改和DOM操作都基于当前组件内的@ViewChild模板引用实现，禁止使用document开头的全局选择器操作当前组件内的元素。
4. 检查my-dropdown组件的状态存储逻辑：如果选中值等状态存放在root层级服务中，将服务的提供范围调整为父组件my-widget层级，保证每个下拉框的状态和所属组件绑定。

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