viewContainerRef.createComponent()后innerHTML无绑定数据问题

在构造函数中注入ViewContainerRef用于实例化MemberCardComponent组件时，尝试给组件传入输入属性数据，发现数据没有被填充到组件的innerHTML中。

核心复现代码如下：

const component = this.viewContainerRef.createComponent(MemberCardComponent);
component.instance.MemberCard = memberData; // 从数据库获取的memberData
const memberCardHtml = component.location.nativeElement.innerHTML; // 获取到的innerHTML中没有MemberCard对应的数据

组件的输入属性MemberCard定义如下：

@Input() set MemberCard(member: IMemberCard) {
    this.member = member;
}

排查发现组件innerHTML里完全没有传入的数据，所有本该展示member字段（比如photoUrl、name等）的位置都是空的。
鼠标悬停查看innerHTML时，所有数据绑定位置均为空值，效果如下：

获取到的innerHTML原始内容：

'<div _ngcontent-yft-c87="" class="card"><div _ngcontent-yft-c87="" class="row g-0 row-eq-height"><div _ngcontent-yft-c87="" class="col-md-4"><picture _ngcontent-yft-c87=""><source _ngcontent-yft-c87="" media="(min-width: 0px) and (max-width: 350px)"><source _ngcontent-yft-c87="" media="(min-width: 351px) and (max-width: 720px)"><source _ngcontent-yft-c87="" media="(min-width: 721px) and (max-width: 1001px)"><source _ngcontent-yft-c87="" media="(min-width: 1002px)"><img _ngcontent-yft-c87="" alt…"float-end"></span></div><div _ngcontent-yft-c87="" class="col-12"><span _ngcontent-yft-c87="">Experience</span><span _ngcontent-yft-c87="" class="float-end"></span></div><div _ngcontent-yft-c87="" class="col-12"><span _ngcontent-yft-c87=""></span><span _ngcontent-yft-c87="" class="float-end"></span></div><div _ngcontent-yft-c87="" class="col-12"><span _ngcontent-yft-c87="">Education</span><span _ngcontent-yft-c87="" class="float-end"></span></div></div></div></div></div><!--container--></div>'

是否需要执行额外操作，才能让传入的输入属性数据渲染到组件的innerHTML中？

该场景需要获取组件的HTML字符串形式，用于填充swiper.js的轮播slide。

问题原因 #

给动态创建的组件实例赋值输入属性是同步操作，赋值完成后Angular还未执行变更检测，数据没有同步渲染到DOM上，此时读取innerHTML拿到的自然是未填充数据的初始模板。
Angular的变更检测是按周期执行的，同步代码块执行过程中不会中途触发视图更新，在赋值后立刻取DOM，刚好卡在视图更新前的时间点，自然拿不到带数据的内容。

解决方案 #

两种方案都能解决问题，按需选择即可：

• 方案1：手动触发变更检测，同步获取渲染后的HTML（优先推荐）
  动态创建的组件实例自带changeDetectorRef实例，赋值完输入属性后手动调用检测方法，强制同步完成视图更新，之后就能直接拿到带数据的HTML，不需要改动原有逻辑的执行时序：

  const component = this.viewContainerRef.createComponent(MemberCardComponent);
  component.instance.MemberCard = memberData;
  // 强制触发当前组件的变更检测，同步更新视图
  component.changeDetectorRef.detectChanges();
  // 此时读取的innerHTML已经完成数据渲染
  const memberCardHtml = component.location.nativeElement.innerHTML;
  // * 用完记得销毁动态组件，避免内存泄漏
  component.destroy();
  

• 方案2：等下一个事件循环周期，等Angular自动完成变更检测后再取DOM
  把读取HTML的逻辑放到异步微任务/宏任务里，等当前同步执行栈清空、Angular跑完一轮变更检测后再读取内容，不需要手动调用变更检测接口：

  const component = this.viewContainerRef.createComponent(MemberCardComponent);
  component.instance.MemberCard = memberData;
  Promise.resolve().then(() => {
    const memberCardHtml = component.location.nativeElement.innerHTML;
    // 在这里执行swiper slide填充的相关逻辑
    component.destroy();
  });
  

  注意这个方案的逻辑是异步执行的，需要调整后续相关逻辑的执行时序，避免拿到undefined的HTML内容。

注意事项 #

通过innerHTML拿到的是纯静态HTML字符串，原本Angular模板里绑定的事件、指令、管道逻辑都会完全失效，因为这些内容已经脱离了Angular的运行上下文。如果轮播卡片后续需要交互（比如点击按钮、响应状态变化），不建议用HTML字符串的方式填充slide，直接把动态创建出的组件原生DOM节点插入到swiper对应容器里是更合理的做法。

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