javascript - InnerHTML在使用viewContainerRef.createComponent()再添加数据时没有属性数据

Question

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

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.

MemberCard 是一个输入属性，如下所示:

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

我看到内部 html 没有填充任何数据。所有的字段都是空的，这里应该有成员(member)数据。前任。 photoUrl、名称等

问题 - 是否需要执行其他操作才能将我的输入数据导入 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>'

仅供引用 - 我正在尝试创建组件的字符串表示形式来填充 swiper.js 幻灯片。这是另一个 SO post我创建的解释了为什么我需要我的组件的字符串表示。

Answer 1

TL;DR:添加一个模板，以便可以评估和呈现组件。

不推荐您使用 innerHTML 的方法，因为 createComponent 是要与模板一起使用的。

完成预期结果I've fixed your Stackblitz example ，它显示了使用这两种方法的预期行为，但是 innerHTML 方式 需要与包装器一起使用，以便 TestComponent changeDetector 有机会呈现变量值。 p>

我所做的主要更改如下:

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

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

1. 将 ViewContainerRef 内容添加到 template 以使其呈现，否则无法获取其 html

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

1. 添加了一个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 代码注入(inject)在 Angular 中是“禁止的”，你必须明确地告诉你愿意接受 使用它的风险。
4. 将 textHtml 值类型从 string 更改为 SafeHtml 以便其接受经过清理的值
5. 为此，您需要隐藏包装设置 style="display: none"
6. 然后您可以清理/销毁包装器或对包装器执行任何您想做的事情，因为您已经获得了它的 HTML。

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