Question

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

不知道如何解决。

表组件：

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

thead组件：

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

身体组件：

<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

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

<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

Answer 2

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

: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 { }

桌子，thead和tbody组件在组装在一起时会破坏桌子的布局

2 个答案: