在没有标签的情况下呈现组件的内容

Question

我需要使用 Angular 2+ 将多级数据渲染到单个平面 table 中。但是，数据的每个部分都由嵌套组件呈现。由于组件有自己的标签，因此它是 <tbody/>.

的无效子项

如何在不呈现其自己的标记的情况下呈现组件的内容？

下面是一个简化的例子：

@Component({
  selector: 'app-table-section',
  template: '<tr><td><h3>{{heading}}</h3></td></tr>' + 
        '<tr *ngFor="let i in items">{{i}}<td></td></tr>',
})
export class TableSectionComponent {
    @Input() heading: string;
    @Input() items: string[];
}

被以下人使用：

@Component({
  selector: 'app-date-table',
  template: '<table>' +
  '  <thead><tr><th>Item Name</th></tr></thead>' +
  '  <tbody>' +
  '    <app-table-section *ngFor="let section of data"' +
  '                       [heading]="section.name"' +
  '                       [items]="sectons.items"></app-table-section>' +
  '  </tbody>' +
  '</table>',
})
export class CustomerListItemComponent {
  data = [
    {name:'Foo', items:['1', '2']},
    {name:'Bar', items:['a', 'b', 'c']},
  ]

  constructor() {
  }
}

以上将呈现 for 循环的结果，仅占用 1 个 table 单元格而不是像这样的多行：

<table>
  <thead><tr><th>Item Name</th></tr></thead>
  <tbody>
  <app-table-section>
    <tr>
      <td><h3>Foo</h3></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </app-table-section>
  <app-table-section>
    <tr>
      <td><h3>Bar</h3></td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </app-table-section>
  </tbody>
</table>

希望期待：

<table>
  <thead><tr><th>Item Name</th></tr></thead>
  <tbody>
    <tr>
      <td><h3>Foo</h3></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td><h3>Bar</h3></td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </tbody>
</table>

我已阅读 Angular2：渲染不带包装标签的组件及其接受的答案 discussion page 但找不到我需要的上述内容。

Answer 1

我最终使用了 CSS 的 display: contents。截至 2018 年 9 月，主要浏览器（Edge 除外）现在（至少部分）支持此功能。（参考：caniuse.com）

:host {
  display: contents;
}

在没有标签的情况下呈现组件的内容

Render a Component's content without its tag

html

javascript

typescript

angular

angular5