Angular createComponent API渲染数据时失效问题排查

你的问题根源是动态创建的内容组件未被纳入Angular的变更检测体系：静态模板无需变更检测即可渲染，但包含{{ name }}这类绑定表达式的模板，需要Angular执行变更检测才能解析插值，而你只将ModalComponent的视图附加到了应用视图树，遗漏了内容组件的视图。

修改后的ModalService代码 #

@Injectable({
  providedIn: 'root',
})
export class ModalService {
  constructor(
    private appRef: ApplicationRef,
    private injector: EnvironmentInjector
  ) {}

  open(modalBodyType: Type<unknown>) {
    const modalContentRef = createComponent(modalBodyType, {
      environmentInjector: this.injector,
    });

    // 关键步骤：将内容组件视图附加到应用变更检测树
    this.appRef.attachView(modalContentRef.hostView);

    const modalRef = createComponent(ModalComponent, {
      environmentInjector: this.injector,
      projectableNodes: [
        [modalContentRef.location.nativeElement],
      ],
    });

    document.body.appendChild(modalRef.location.nativeElement);
    this.appRef.attachView(modalRef.hostView);
  }
}

额外修正 #

open方法的参数类型Type<ElementRef>错误，应改为Type<unknown>或Type<any>——你传入的是组件类型，而非ElementRef类型。

原理说明 #

通过this.appRef.attachView(modalContentRef.hostView)，将动态创建的内容组件视图加入Angular应用视图树，Angular会自动对其执行变更检测，绑定表达式就能正常解析并渲染数据。

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