table，当 assemble 在一起时，thead 和 tbody 组件破坏了 table 的布局

Question

当我在父页面中为 table 和 thead 和 tbody 分别创建组件时，table 完全中断。

不知道如何解决。

table分量：

<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>

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

Live URL please resize window

Answer 1

如果您检查 table 元素，您会看到它是这样呈现的

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

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

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

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

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

在所有地方完成后，您将像这样加载您的自定义 table：

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

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

StackBlitz

Answer 2

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

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>

table，当 assemble 在一起时，thead 和 tbody 组件破坏了 table 的布局

table, thead and tbody component breaks the layout of the table when assemble together

angular

angular8