Angular修改@Input绑定对象属性后子组件未触发刷新如何解决

问题原因 #

Angular 的 ngOnChanges 钩子仅在输入属性的引用发生变更时才会触发，你当前的修改操作是直接更改 selCase 这个对象的内部属性 caseId，对象本身的内存引用没有变化，因此 Angular 判定输入属性未更新，不会触发 ngOnChanges 钩子。

解决方案 #

方案1：替换对象引用（最推荐，改动最小） #

在提交成功的回调中，不要直接修改原有 selCase 的属性，而是基于原有对象复制生成一个新对象，替换掉原有 selCase 的引用，即可触发 ngOnChanges。
修改 positiveCase.component.ts 的 onSubmit 回调逻辑：

() => {
  this.caseObj = this.data;
  // 解构复制原对象所有属性，覆盖caseId，生成新对象替换原有引用
  this.selCase = {
    ...this.selCase,
    caseId: this.caseObj.caseId
  };
}

方案2：单独传递caseId作为输入参数 #

将 caseId 单独拆分为基础类型的输入参数传给 caseAssign 组件，基础类型值变更会直接触发 ngOnChanges：

1. 修改 positiveCase.component.html：

<caseAssign [selCase]="selCase" [caseId]="selCase.caseId"></caseAssign>

2. 在 caseAssign.component.ts 中新增 @Input() caseId: number;，监听该属性的变化即可。

方案3：手动调用子组件更新方法 #

通过模板引用获取 caseAssign 组件实例，修改属性后主动调用子组件的更新逻辑：

1. 给 positiveCase.component.html 中的 caseAssign 标签加模板引用：

<caseAssign #caseAssignRef [selCase]="selCase"></caseAssign>

2. 在 positiveCase.component.ts 中获取子组件实例，提交成功后主动触发更新：

// 引入ViewChild
import { ViewChild } from '@angular/core';
import { CaseAssignComponent } from './caseAssign.component';

export class positiveCase  implements OnInit {
  @ViewChild('caseAssignRef') caseAssignComp: CaseAssignComponent;
  @Input() selCase : Cases; 
  
  onSubmit(){
    this.caseService.saveCase(this.createPositiveForm.value).subscribe( posts =>{
        this.data = posts;
      },
      error => {
        console.log('saveCase - error',error);
        this.messageService.add({severity:'error', summary:'Error Message', detail:error.error, sticky: true});        
      },
      () => {
        this.caseObj = this.data;
        this.selCase.caseId = this.caseObj.caseId;
        // 手动调用子组件的更新逻辑，方法名按你实际需求定义
        this.caseAssignComp.afterCaseIdUpdate();
    });
  }
}

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