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

Question

我在表格内动态调用组件。我正在使用 ViewContainerRef 在模板内动态呈现组件。但是另一个元素内的模板没有被填充。可能是因为在声明 @ViewChild 时，另一个 ng-template 不在 DOM 中。

这是组件代码：

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


ngAfterViewChecked(): void {

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

这里是模板代码：

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

       <td *ngIf="data.isDisplay">        

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

    </td>

...

那么，一旦动态评估td 代码，如何确保组件在td 内呈现？

Answer 1

编辑：

通过非静态获取所有模板引用，您可以遍历模板引用并为每个模板创建一个组件，之后您只需将其附加到某个 DOM 元素（模板引用的父级）

@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);
});

这是一个工作示例： https://stackblitz.com/edit/angular-gmnpku?file=src/app/app.component.ts