angular - 由 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; 

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

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

Answer 1

Component1Component在尝试访问呈现的 DOM 之前，您需要确保更改检测已运行。

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

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;