在Angular中使用无模板标签来承载递归组件

Question

我创建一个递归组件my-row在Angular中，意味着它会对树数据结构

的每一层调用自己很多次。组件模板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>

我在表体中调用它，如下所示:

<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>

问题是，我不能把任何标签之间的主体和它的tr，否则它不会出现，但我可以使用ng-container或ng-template因为它们不影响结构

在发现我试图将我的组件作为指令托管在ng-container之后/ng-template:

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

但不幸的是，我有一个错误，说ng-containerng-template.

你能给我一些其他潜在的组件，我可以使用托管或其他解决方案。

Answer 1

您可以尝试以下方法

在MyRowComponent中修改Component装饰器中的选择器，这样它就允许你使用类似于指令的组件

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

在表体中做如下修改:

<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>

在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>