Angular动态组件createComponent下子组件input值同步更新问题

嘿，我明白你遇到的问题了——你通过createComponent动态创建子组件后，只在初始化时给子组件的name赋了一次值，之后父组件的name更新时，子组件根本没收到通知。而且你会发现子组件的ngOnChanges完全没触发，这是因为ngOnChanges只有当你用Angular的输入绑定语法（比如<child-component [name]="name">）传递值时才会生效，直接给component.instance.name赋值不属于这种“官方”的输入传递方式，所以Angular不会帮你自动同步变更。

接下来给你几种可行的解决方案，你可以根据项目的Angular版本和复杂度来选：

方案一：在父组件的setter里手动更新子组件（简单直接） #

这种方法最直观，就是在父组件的name setter里，一旦值变化，就主动更新子组件的实例属性。

首先在父组件里保存子组件的引用：

// ParentComponent里添加
private childComponent: ComponentRef<ChildComponent>;

然后修改ngAfterContentInit和name setter：

ngAfterContentInit() {
  let factory = this.resolver.resolveComponentFactory(ChildComponent);
  // 保存子组件引用
  this.childComponent = this.container.createComponent(factory);
  this.childComponent.instance.name = this.name;
}

set name(name: string) {
  this._name = name;
  // 子组件存在时，同步更新它的name
  if (this.childComponent) {
    this.childComponent.instance.name = name;
  }
}

这样每次父组件的name变化，都会立刻传递给子组件，子组件的setter会触发，视图也会跟着更新。

方案二：用RxJS Subject实现响应式同步（适合复杂场景） #

如果你的项目里已经在用RxJS，这种方式更优雅，尤其是当有多个动态组件或者需要更复杂的数据流时。

在父组件里创建一个Subject来推送name的变化：

// ParentComponent导入Subject
import { Subject } from 'rxjs';

// ...
private nameSubject = new Subject<string>();
private _name = 'John Doe';

get name() {
  return this._name;
}
set name(name: string) {
  this._name = name;
  // 推送新值到Subject
  this.nameSubject.next(name);
}

然后在创建子组件时订阅这个Subject：

ngAfterContentInit() {
  let factory = this.resolver.resolveComponentFactory(ChildComponent);
  let component = this.container.createComponent(factory);
  // 初始赋值
  component.instance.name = this.name;
  // 订阅变化，自动同步
  this.nameSubject.subscribe(newName => {
    component.instance.name = newName;
  });
}

这种方式不需要每次手动更新，只要父组件的name变化，Subject就会自动通知所有订阅的子组件。

方案三：用Angular官方的setInput方法（Angular 14+推荐） #

从Angular 14开始，ComponentRef新增了setInput方法，这是官方推荐的动态组件输入绑定方式，它会像模板里的[name]="name"一样触发变更检测，甚至能让子组件的ngOnChanges钩子正常工作。

修改父组件的代码：

private childComponent: ComponentRef<ChildComponent>;

ngAfterContentInit() {
  let factory = this.resolver.resolveComponentFactory(ChildComponent);
  this.childComponent = this.container.createComponent(factory);
  // 用setInput设置输入属性
  this.childComponent.setInput('name', this.name);
}

set name(name: string) {
  this._name = name;
  if (this.childComponent) {
    // 再次调用setInput更新值
    this.childComponent.setInput('name', name);
  }
}

这时你会发现子组件的ngOnChanges终于能打印出变化日志了，完全符合Angular的输入绑定逻辑，这是最规范的做法。

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