如何为 *ngIf 中声明的模板调用 @ViewChild？

Question

I am calling a component dynamically inside a table. I am using ViewContainerRef to render the component dynamically inside a template. But the template that is inside another element, is not being populated. Maybe because while declaring @ViewChild , the other ng-template is not in the DOM.

Here is the component code:

@ViewChild('loadComponent', {static: false, read: ViewContainerRef}) ref;


ngAfterViewChecked(): void {

    const componentFactory = 
    this._componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const ref = this.ref.createComponent(componentFactory);
    ref.changeDetectorRef.detectChanges();
  }

Here is the template code:

<table>
...
    <tr *ngFor="let data of dataItems">       

       <td *ngIf="data.isDisplay">        

       <ng-template #loadComponent></ng-template> // this does'nt work  

    </td>

...

So, how do I make sure that the component is rendered inside the td once the td code is evaluated dynamically?

Answer 1

Edit :

By getting all templateRefs non statically, you could iterate through the template refs and create a single component for every one, after that you only need to attach it to some DOM element (templateRef's parent)

@ViewChildren("dynamicTemplateId") private refs: QueryList<"dynamic">;

this.refs.forEach((r: any) => {
  // Create a new instance of the component
  const dynamicComponentRef = componentFactory.create(this.injector);

  // If you don't attach to appRef ng hook cycles won't work inside the component 
  // You can skip adding to application ref but you'll be needing to call .detectChanges() for every changes 
  this.appRef.attachView(dynamicComponentRef.hostView);

  // Append to parentElement since templateRef isn't a element itself
  r.elementRef.nativeElement.parentElement.appendChild(dynamicComponentRef.location.nativeElement);
});

Here's a working example: https://stackblitz.com/edit/angular-gmnpku?file=src/app/app.component.ts