html - Angular 2 : Remove the wrapping DOM element in a component

Question

我正在使用嵌套数据编写一个 HTML 表格组件，因此输出可能如下所示:

<table>
  <tr><td>Parent</td></tr>
  <tr><td>Child 1</td></tr>
  <tr><td>Child 2</td></tr>
  <tr><td>Grandchild 1</td></tr>
</table>

我想使用递归组件创建它，如下所示:

<table>
  <data-row *ngFor="let row of rows" [row]="row"></data-row>
</table>

数据行:

<tr><td>{{row.name}}</td></tr>
<data-row *ngFor="let child of row.children" [row]="child"></data-row>

但是，这会在表格行周围添加一个环绕元素，这会破坏表格并且是无效的 HTML:

<table>
  <data-row>
    <tr>...</tr>
    <data-row><tr>...</tr></data-row>
  </data-row>
</table>

是否可以删除这个 data-row包装元素？

一个解决方案:

一种解决方案是使用 <tbody data-row...></tbody>这就是我目前正在做的，但这会导致嵌套 tbody反对W3C的元素规范

其他想法:

我试过使用 ng-container但似乎不可能做到<ng-container data-row...></ng-container>所以这是不可能的。

我也考虑过放弃使用表格，但是使用 HTML 表格是允许将数据简单复制到电子表格中的唯一方法，这是一项要求。

我考虑过的最后一个选择是在生成表格之前展平数据，但是，由于树可以随意展开和折叠，这会导致过度重新渲染或非常复杂的模型。

编辑:这是我当前解决方案的 Plunk(违反规范):http://plnkr.co/edit/LTex8GW4jfcH38D7RB4V?p=preview

Answer 1

只需使用类或属性作为组件的选择器并将其应用于表格行元素。

 @Component({
 selector: [data-row],

与

  <tr data-row> </tr>

或

 @Component({ 
 selector:  .data-row,

与

 <tr class="data-row"></tr>

编辑 - 我只能在子组件中使用内容投影，然后将 td 元素包含在父组件的组件元素中。看这里 - https://plnkr.co/edit/CDU3Gn1Fg1sWLtrLCfxw?p=preview

如果这样做，您可以使用 ContentChildren 查询所有行

 import { Component, ContentChildren, QueryList }  from '@angular/core';
 import { DataRowComponent } from './wherever';

在你的组件中的某处......

 @ContentChildren(DataRowComponent) rows: QueryList<DataRowComponent>;

这将在 ngAfterContentInit 中定义

ngAfterContentInit() { 
    console.log(this.rows);  <-- will print all the data from each component
 }

注意 - 您还可以在自己的模板中拥有递归(这是一个词吗？)自身的组件。在数据行组件的模板中，您有任意数量的数据行组件。