如何通过ComponentRef手动触发变更检测？动态组件onChanges未触发

直接通过ComponentRef.instance[key] = value的方式给动态组件的输入属性赋值，不会触发ngOnChanges。因为Angular的ngOnChanges生命周期钩子仅在框架通过模板数据绑定或组件输入绑定机制更新属性时才会触发，手动修改实例属性绕开了这个流程。

方案1：使用ComponentRef.setInput()（Angular 14+） #

Angular 14及以上版本提供了setInput()方法，专门用于动态设置组件输入属性，它会触发变更检测并调用ngOnChanges：

修改你的属性赋值代码：

const compData = { input1:1, input2: 2 };
const updateObject = { ...compData, compId: compInsId, mountElId };
// 遍历设置每个输入属性
Object.entries(updateObject).forEach(([key, value]) => {
  ModalContentComponentRef.setInput(key, value);
});
// 触发变更检测
ModalContentComponentRef.changeDetectorRef.detectChanges();

方案2：适配Angular 14以下版本 #

如果你的项目版本低于14，可以通过以下两种方式处理：

• 使用@Input()的setter替代ngOnChanges：在动态组件中，把需要监听的输入属性改成setter形式，这样手动赋值时也会触发逻辑：

// 动态组件内部代码
@Input() set input1(value: number) {
  // 这里写原来ngOnChanges里处理input1的逻辑
}
@Input() set input2(value: number) {
  // 处理input2的逻辑
}

• 手动模拟ngOnChanges触发：如果必须使用ngOnChanges，可以在赋值后手动调用组件的ngOnChanges方法，并构造SimpleChanges对象：

const compData = { input1:1, input2: 2 };
const updateObject = { ...compData, compId: compInsId, mountElId };
// 先赋值属性
for (const key of Object.keys(updateObject)) {
  ModalContentComponentRef.instance[key] = updateObject[key];
}
// 构造SimpleChanges对象并手动调用ngOnChanges
const changes: SimpleChanges = {};
Object.entries(updateObject).forEach(([key, value]) => {
  changes[key] = {
    previousValue: undefined, // 首次赋值时previousValue为undefined
    currentValue: value,
    firstChange: true,
    isFirstChange: () => true
  };
});
ModalContentComponentRef.instance.ngOnChanges(changes);
// 触发变更检测
ModalContentComponentRef.changeDetectorRef.detectChanges();

额外注意事项 #

• 确保动态组件中的对应属性已经标记为@Input()，否则Angular不会将其视为输入属性，即使使用setInput()也不会触发ngOnChanges。
• 调用detectChanges()前，确保组件已经被附加到应用视图（你已经通过applicationRef.attachView完成了这一步）。

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