Angular 4 - 在动态组件中获取ComponentRef的innerHTML

Question

我一直在尝试整合动态IServiceProvider。

Angular documentation

除了愚蠢的问题外，它已经完成了。每次在我的动态组件中都有一个component数组和[object object]个元素。

在控制台中，在HTML内，hostview存在rootNodes。

在innerHTML内获取innerHTML的方法是什么？

以下是rootNodes代码 -

Angular

此处 let factory = this.factoryResolver .resolveComponentFactory(TextFieldViewComponent); let component = factory .create(viewContainerRef.parentInjector); console.log(component); let componentView = viewContainerRef.insert(component.hostView); 是带有componentView

的输出HTML元素

编辑1：

这是我的动态组件的输出

编辑2：

以下是动态添加组件的模板 -

[object object]

在我的控制台中 - 我看到<md-list-item> <div class="formfield-wrapper"> <div class="formfield-view"> <label></label> <md-input-container> <input type="text" mdInput disabled placeholder="Textfield" value=""> </md-input-container> </div> <div class="formfield-options"> <md-icon>settings</md-icon> <md-icon>remove</md-icon> </div> </div> <input type="hidden" name="textfield-label[]" value=""/> <input type="hidden" name="textfield-placeholder[]" value=""/> <input type="hidden" name="textfield-required[]" value=""/> <input type="hidden" name="textfield-required-msg[]" value=""/> </md-list-item> 显示在我的动态组件object array之后。喜欢 -

selector

Answer 1

如果我理解你正确，你试图将HTML传递给动态生成的组件？如果是这样，您可以使用instance()属性直接将数据传递到组件中，就像它是输入一样。

组件工厂将返回ComponentRef，它是组件创建的直接引用。因此，您需要使用可用的方法和属性来访问它。

例如：

component.instance['innerHTML'] = "<div>Some HTML</div>";

注入组件后，您应该可以访问该数据，就好像它是@Input()一样。

@Input() innerHTML: string;

Answer 2

这是从组件工厂提取dom元素的方式，不确定是否仍然需要它，但是对于其他正在寻找它的人来说。

const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

谢谢。