javascript – Angular2：渲染没有包装标签的组件

我正在努力找到一种方法来做到这一点.在父组件中,模板描述了一个表及其thead元素,但委托将tbody呈现给另一个组件,如下所示：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

每个myResult组件都会呈现自己的tr标记,基本上如下：

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

我没有直接将它放在父组件中(避免需要myResult组件)的原因是myResult组件实际上比这里显示的更复杂,所以我想把它的行为放在一个单独的组件和文件中.

结果DOM看起来很糟糕.我相信这是因为它是无效的,因为tbody只能包含tr元素(see MDN),但我生成的(简化的)DOM是：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

有没有什么方法我们可以得到相同的渲染,但没有包装< my-result>标签,并仍然使用组件独自负责呈现表行？

我查看了ng-content,DynamicComponentLoader,ViewContainerRef,但就我所见,他们似乎并没有为此提供解决方案.

解决方法:

您可以使用属性选择器

@Component({
  selector: '[myTd]'
  ...
})

然后像使用它一样

<td myTd></td>