使用viewContainerRef.CreateComponent（），然后添加数据时，InnerHTML没有属性数据

Question

问题 - 我正在将ViewContainerRef传递到我的构造函数中，以实例化一个名为“ MemberCardComponent”的组件。然后，我试图用输入数据填充它，但是没有将数据填充到InterHTML中。

stackblitz - 我已经设置了这个SB证明我的问题： stackblitz link

const component = this.viewContainerRef.createComponent(MemberCardComponent);
component.instance.MemberCard = memberData; // memberData fetched from Db
const memberCardHtml = component.location.nativeElement.innerHTML; // innterHTML doesn't have MemberCard data.

看起来像这样的属性：

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

我看到内部HTML并未填充任何数据。所有字段都是空的，应该有会员数据。前任。 photourl，name等

问题 - 我还需要执行其他操作以将我的输入数据传达到InterHTML中吗？

这是我悬停在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>'

fyi - 我正在尝试创建组件的字符串表示形式以填充Swiper.js幻灯片。这是另一个所以我创建了我创建的解释了为什么我需要组件的字符串表示。

Answer 1

tl; dr：添加模板，以便可以评估和渲染组件。

您不建议使用 InnerHtml 的方法，因为 createComponent 将与模板一起使用。

为了实现预期的结果我已经修复了您stackblitz示例，它显示了使用这两种方法的预期行为，但是 inninhtml方法需要与包装器一起使用，因此 testComponent 更改eTector有机会使用渲染变量值。

我所做的主要更改是：

1. 添加了一个自定义模板，因此 testCompnent 值可以是
   评估

@ViewChild('customTemplate', { read: ViewContainerRef, static: true })
customTemplate: ViewContainerRef;

2. 了 viewContainerRef 内容到 template 使其得到渲染，，否则无法获得其HTML

this.customTemplate.insert(this.viewContainerRef.get(0))

3. 添加 detectChanges 评估父母及其子女的检测更改的代码>

detectChanges(): void {
  if (this.customComponent?.changeDetectorRef) {
    this.customComponent.changeDetectorRef.detectChanges();
  } else {
    if (this.customComponent) {
      console.log('Custom component not ready.');
    }
  }
  this.cdr.detectChanges();
}

可以做更多的方法，我对此进行了回答，因为您的代码更合适地适合它。

---

同样，

对于不建议使用 innerhtml 的建议解决方案，必须进行以下更改：

1. 上一个解决方案中提到的所有内容，因为
   没有其他方法（我知道）渲染和评估组件。
2. 包装器DOM，因此您可以提取其评估的 innerhtml
3. a domsatinizer 可以渲染DOM，直接的HTML代码注入是“禁止的”，您必须明确地显式告诉你你愿意接受
   使用它的风险。
4. 更改 texthtml 从字符串到 safe> safehtml 的值类型，因此其接受消毒值
5. 以使其工作，您需要隐藏包装器设置 style =“ display：none”
6. 您可以清洁/销毁或用包装器做任何您想做的事情，因为您已经获得了HTML。

this.testHtml = this.sanitizer.sanitize(
  SecurityContext.HTML,
  this.sanitizer.bypassSecurityTrustHtml(
    document.getElementById('wrapper').innerHTML
  )
);

Answer 2

您可以将更改EtectionRef 将其注入到 MemberCardComponent 组件，然后在您的父零件中调用 detectchanges（）。

在触发更改检测之前，您正在尝试获取 innerhtml 。

这是一个工作示例： stackblitz