Angular中通过TypeScript触发动态子组件的ngOnChanges

直接给动态创建的组件实例赋值@Input属性时，Angular的变更检测机制不会识别该操作，因此不会触发ngOnChanges钩子。以下是几种可行的解决方案：

方法一：使用ComponentRef.setInput（Angular 14+ 推荐） #

Angular 14及以上版本提供了官方推荐的setInput方法，用于更新动态组件的输入属性，会自动触发变更检测和ngOnChanges：

// 创建组件并获取ComponentRef实例
const componentRef = this.viewContainerRef.createComponent(this.data.body);
// 使用setInput设置输入属性
componentRef.setInput('childInput', 5);
// 保存组件实例（如需后续操作）
this.childComponent = componentRef.instance;

方法二：手动构造SimpleChanges调用ngOnChanges #

如果使用低版本Angular，无法使用setInput，可以手动构造SimpleChanges对象并调用子组件的ngOnChanges方法：

this.childComponent = this.viewContainerRef.createComponent(this.data.body).instance;
// 记录输入属性的旧值（首次赋值时旧值为undefined）
const oldValue = this.childComponent.childInput;
// 赋值新值
this.childComponent.childInput = 5;
// 构造符合要求的SimpleChanges对象
const changes: SimpleChanges = {
  childInput: {
    previousValue: oldValue,
    currentValue: 5,
    firstChange: oldValue === undefined,
    isFirstChange: () => oldValue === undefined
  }
};
// 手动触发ngOnChanges
this.childComponent.ngOnChanges(changes);

说明 #

• 方法一的setInput会自动处理变更检测逻辑，是最简洁可靠的方式；
• 方法二需要手动维护属性的新旧值，适合兼容低版本Angular的场景。

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