由 componentFacory 动态创建的组件的 elementRef 的 InnerHtml 不包含绑定值

Question

我有一个名为 component1 的简单组件：这是它的 HTML 与绑定和模板参考：

<div class="AAA" [ngClass]="someClass" #templateRef > 
<div class="main-container"> <span> {{someNumber}}</span></div>
</div>

这是组件：

export class Component1Component implements OnInit { 

@ViewChild('templateRef ', { static: true })      
templateRef : ElementRef;
someNumber : number
someClass : string
get TemplateRef ()
{
   return this.templateRef ;
}

现在- 在另一个组件中，我正在使用 ComponentFactoryService 动态创建此组件，然后设置 2 个变量。我想最终得到组件绑定后的HTML：

let componentFactory : ComponentFactory<any> = 
this.componentFactoryService.getComponentFacroty(this.componentName); //componentName is Component1Component 
this.componentRef = this.componentContainer.createComponent(componentFactory);
/*here I set the variables that should be binded*/
this.componentRef.instance.someNumber = 10;
this.componentRef.instance.someClass = "class1;

现在我得到了内部 HTML 没有绑定，尽管我可以在中看到这些绑定值 component1Component oninit 函数。

var htmlAfterBindind = this.componentRef.instance.templateRef.nativeElement.innerHTML;

Answer 1

在尝试访问呈现的 DOM.

之前，您需要确保更改检测在 Component1Component 上具有运行

为此，您可以在访问 innerHTML 之前调用 ChangeDetectorRef.detectChanges：

import { ChangeDetectorRef } from '@angular/core';

constructor(private changeDetectorRef: ChangeDetectorRef) {}

this.componentRef = this.componentContainer.createComponent(componentFactory);

/*here I set the variables that should be binded*/
this.componentRef.instance.someNumber = 10;
this.componentRef.instance.someClass = "class1;

/* Call detectChanges to render the DOM */
this.changeDetectorRef.detectChanges();

/* Now the DOM is ready */
let htmlAfterBindind = this.componentRef.instance.templateRef.nativeElement.innerHTML;

由 componentFacory 动态创建的组件的 elementRef 的 InnerHtml 不包含绑定值

InnerHtml of elementRef of component created dynamically by componentFacory not containing binded values

angular

data-binding

innerhtml

viewchild

elementref