[解決済み] Angular2 : ラッピングタグなしでコンポーネントをレンダリングする

質問

この方法を見つけるのに苦労しています。親コンポーネントに、テンプレートに記述された table とその 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 要素 (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>