Angular手动设置@Input值后同值传入仍触发ngOnChanges如何解决

问题原因 #

Angular的@Input变更检测由父组件的绑定值驱动，你在子组件内部手动修改@Input属性的值，只会修改子组件类的实例属性，不会更新Angular框架内部维护的「父组件输入值历史快照」。在你触发output通知父组件时，父组件侧绑定的员工id变量仍然是undefined，等父组件完成树节点选中、将绑定的id变量更新为新员工id后，Angular对比框架记录的上一次输入值undefined和本次新输入的id，自然会触发ngOnChanges，和你子组件内部有没有提前改这个属性完全无关。

解决方案 #

方案1：子组件增加重复请求拦截逻辑（改动最小） #

在子组件内新增一个变量记录当前已经加载完成的员工id，ngOnChanges触发时先做一致性校验，匹配成功就跳过请求：

// 子组件 employee.component.ts
currentLoadedId: number | undefined;

ngOnChanges(changes: SimpleChanges) {
  if (changes['employeeId']) {
    const newId = changes['employeeId'].currentValue;
    // 新增判断：和已加载的id一致则跳过请求
    if (newId === this.currentLoadedId) return;
    // 原有的请求逻辑
    this.http.get(`/employee/${newId}`).subscribe(res => {
      this.currentLoadedId = newId;
      // 填充表单逻辑
    })
  }
}

// 保存新员工成功的回调里，提前赋值currentLoadedId
saveNewEmployee() {
  this.http.post('/employee', formData).subscribe(res => {
    this.currentLoadedId = res.id; // 新增这行
    this.employeeId = res.id;
    // 填充表单逻辑
    this.addNode.emit(res);
  })
}

方案2：优化父组件数据流（更符合单向数据流规范） #

把员工数据拉取逻辑移到父组件，子组件不再接收id，而是直接接收完整的员工对象作为@Input：

• 新增员工时父组件直接传undefined给子组件显示空白表单
• 子组件保存成功后把新员工对象返回给父组件，父组件更新树节点、同时把新员工对象直接传给子组件
• 树节点选中时父组件拉取对应员工数据再传给子组件
  这种方案从根源上避免了重复请求的可能，数据流更清晰易维护。

方案3：父组件侧跳过重复赋值 #

父组件处理子组件的新增通知时，先把自己绑定的selectedEmployeeId变量赋值为新员工id，再更新树的选中状态，同时在树的选中事件回调里判断：如果选中的id和当前selectedEmployeeId一致，就不重新赋值，自然不会触发子组件的输入变更。

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