Angular13动态组件嵌套输入数据时ngOnChanges不触发问题

问题原因 #

你通过componentRef.instance['data'] = { ...data }直接给动态组件的输入属性赋值，绕开了Angular的输入绑定机制。ngOnChanges钩子仅在Angular通过组件输入绑定检测到属性变化时才会触发，直接修改实例属性不会触发该钩子。虽然子组件的data setter会执行，但ngOnChanges里的样式更新逻辑无法运行，导致界面不更新。

解决方案 #

方案1：将样式更新移到data的setter中（推荐） #

利用子组件已有的data setter，把styles的更新逻辑直接放在setter内，这样只要data被赋值（不管是初始化还是后续更新），样式都会同步更新，无需依赖ngOnChanges。

修改TextBlockComponent和ButtonBlockComponent：

@Input() set data(d: IBlock) {
  this._data = { ...d };
  // 将样式更新逻辑移到setter里
  this.styles = this._data.attribute;
}

// 可选：保留ngOnChanges用于日志或其他逻辑，也可直接移除
ngOnChanges(changes: SimpleChanges) {
  console.log('--ngOnChanges-TextBlockComponent--', this._data);
}

方案2：手动触发ngOnChanges（不推荐） #

如果必须触发ngOnChanges，可在DynamicLoaderComponent的updateComponentData方法中，手动模拟SimpleChanges并调用子组件的ngOnChanges，同时触发变更检测：

import { SimpleChanges, SimpleChange } from '@angular/core';

// ...

updateComponentData(data: any) {
  const prevData = this.componentRef.instance.data;
  this.componentRef.instance['data'] = { ...data };
  
  // 构造变化对象
  const changes: SimpleChanges = {
    data: new SimpleChange(prevData, data, false)
  };
  // 手动调用子组件的ngOnChanges
  this.componentRef.instance.ngOnChanges(changes);
  // 触发视图更新
  this.componentRef.changeDetectorRef.detectChanges();
}

这种方式需要手动维护前后值，代码冗余且不符合Angular设计理念，仅在特殊场景下使用。

验证 #

修改后调用updateData方法，子组件的文本内容和样式会同步更新，满足需求。

内容的提问来源于stack exchange，提问作者Sandeep K Nair