table、thead 和 tbody 组件组合在一起时会破坏 table 的布局

Question

当我在父页面中分别为 table 和 thead 和 tbody 创建组件时，表格完全崩溃了。

不知道怎么解决。

表格组件：

<table>
    <ng-content></ng-content>
</table> 

头组件：

<thead>
  <tr>
    <th>Someple header</th>
    <th>Someple header</th>
  </tr>
</thead>

tbody 组件：

<tbody>
  <tr>
    <td>sample data1</td>
    <td>sample data2</td>
  </tr>
</tbody>

放在一起时：

<app-table>
  <app-thead></app-thead>
  <app-tbody></app-tbody>
</app-table>

但它打破了桌子。全部排列为内联元素。如何解决？

Live URL please resize window

Answer 1

如果我了解您要做什么，我认为您只需用 <ng-content></ng-content> 标记替换您的 TableComponent、TheadComponent 和 TbodyComponent 组件的 html。然后，您将使用:host 选择器分别将<app-table>、<app-thead> 和<app-tbody> 上的显示属性设置为table、table-header-group 和table-row-group。代码如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';


@Component({
  selector: 'app-table',
  template: `<ng-content></ng-content>`,
  styles: [`:host { display:table; }`]
})
export class TableComponent {}


@Component({
  selector: 'app-thead',
  template: `<ng-content></ng-content>`,
  styles: [`:host { display:table-header-group; }`]
})
export class TheadComponent {}


@Component({
  selector: 'app-tbody',
  template: `<ng-content></ng-content>`,
  styles: [`:host { display:table-row-group; }`]
})
export class TbodyComponent {}


@Component({
  selector: 'app-root',
  template: `
      <app-table>
        <app-thead>Thead</app-thead>
        <app-tbody>Tbody</app-tbody>
      </app-table>
  `
})
export class AppComponent {}


@NgModule({
  declarations: [
    AppComponent, 
    TableComponent, 
    TheadComponent,
    TbodyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后代码会输出如下：

<app-table>
  <app-thead>Thead</app-thead>
  <app-tbody>Tbody</app-tbody>
</app-table>

Answer 2

如果你检查表格元素，你会看到它是这样渲染的

<table>
  <app-thead>...</app-thead>
  <app-tbody>...</app-tbody>
</table> 

这本身不是一个有效的 HTML。 tbody / thead 除了table 之外，您不能有任何其他包装器。这就是为什么你的桌子坏了，它除了 tbody 而是得到 app-tbody 并且不知道如何处理它。我建议不要为表格的主体和头部创建单独的组件，或者如果你真的必须这样做，你可以这样：

解决方法： 使用属性选择器

在您的app-table、app-thead 和app-tbody 组件中，将选择器转换为属性选择器。

@Component({
  selector: '[app-table]'
  ...
})

在所有地方都这样做之后，您将像这样加载您的自定义表格：

<table app-table>
  <thead app-thead></thead>
  <tbody app-tbody></tbody>
</table>

还要确保从您的自定义组件中删除 <table>、<tbody> 和 <thead> 包装器。

StackBlitz