使用无模板标签在 Angular 中托管递归组件

Question

I created an recursive component my-row in Angular, it means that it calls itself many times for each level of my tree data structure,

The template of the component my-row :

<ng-container [pReorderableRow]="rowIndex" *ngIf="level === this.groupingLevels.length else child_row">
    <tr>
       <td [attr.rowspan]="rowGroupMetaData.indexes.length"> 
           {{rowGroupMetaData.source[col]}}
       </td>
    </tr>
</ng-container>


<ng-template #child_row>
  <my-row  *ngFor="let metaKey of getKeys(); index as i;"
          [rowGroupMetaData]="rowGroupMetaData.children[metaKey]"
  >
  </my-row>
</ng-template>

And I called it inside my table's body as follow:

<p-table
    [value]="[{}]"
    [columns]="cols"
    [reorderableColumns]="true"
    (onColReorder)="onColReorder($event)"
  >
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th>
          {{col}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowIndex="rowIndex" let-columns>
      <my-row *ngFor="let metaKey of getKeys(rowGroupMetadata)"
                  [rowGroupMetaData]="rowGroupMetadata[metaKey]"></my-row>
    </ng-template>
</p-table>

The problem is that I must not put any tag between the tbody and it's tr otherway it will not appear, but I can use ng-container or ng-template between them because they don't affect the structure.

After discovering that I tried to host my component as a directive inside an ng-container / ng-template :

<ng-container my-row
                  *ngFor="let metaKey of getKeys(rowGroupMetadata)"
                  [rowGroupMetaData]="rowGroupMetadata[metaKey]"
></ng-container>

But unfortunately I have the error that says that ng-container is not used as host, neither ng-template .

Can you give some other potential components that I can use for hosting or another solution please.

Answer 1

You could try following approach

Change in MyRowComponent the selector in the Component decorator so that it allows you to use components similar to directives

@Component({
  selector: '[my-row]', // instead of just 'my-row'
  templateUrl: './my-row.component.html',
})

In table's body make following change:

<ng-template pTemplate="body" let-rowIndex="rowIndex" let-columns>
      // host my-row directly on a tr element
      <tr my-row *ngFor="let metaKey of getKeys(rowGroupMetadata)"
                  [rowGroupMetaData]="rowGroupMetadata[metaKey]"></tr>
</ng-template>

In the template of my-row

<ng-container [pReorderableRow]="rowIndex" *ngIf="level === this.groupingLevels.length else child_row">
   
   // if not child element, only show td as the host element is tr itself

   <td [attr.rowspan]="rowGroupMetaData.indexes.length"> 
       {{rowGroupMetaData.source[col]}}
   </td>
   
</ng-container>


<ng-template #child_row>
  <tr my-row  *ngFor="let metaKey of getKeys(); index as i;"
          [rowGroupMetaData]="rowGroupMetaData.children[metaKey]"
  >
  </tr my-row>
</ng-template>