角度自定义组件的样式封装

Question

我正在制作一个th的组件，现在只是一个带有图标的组件：

自定义-th.component.html

<th #main>{{headerName}}<div style="position: relative"><i class="fa fa-th" aria-hidden="true"></i></div></th>

自定义-th.component.scss

.fa-th {
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: col-resize;
}

自定义-th.component.ts

@Component({
  selector: 'app-custom-th',
  templateUrl: './custom-th.component.html',
  styleUrls: ['./custom-th.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class CustomThComponent{
  @Input('headerName') headerName: string;
  constructor (private renderer: Renderer2) {}


}

当我使用自定义组件代替表格中的另一个th时：

<thead class="thead-default">
    <tr class="bg-primary">
      <app-custom-th headerName="Key" ></app-custom-th>
      <th>Value</th>
    </tr>
</thead>

我的自定义th的风格与其他非自定义风格不同。我对view encapsulation none的理解是，全局样式（可能来自我的其他组件或引导程序）可以应用于我的主机组件及其子组件。如果我将HTML放在主机组件之外并将其直接放入我的HTML中，它将按预期工作/看起来。

使用自定义组件

自定义组件的html，不使用自定义组件（所需结果）

根据Firefox的检查员的说法，自定义组件大约是25x20，因此设置100％的宽度和高度不会改变任何东西。如果我设置宽度（以像素为单位），我会得到一个结果，但是单元格总体上变得更大（我不知道为什么会这样）。

firefox检查

Answer 1

来自yurzui：您无法在tr中使用自定义元素。但我们可以在th和td内部使用自定义组件，因此选择器已更改为：

selector: 'app-custom-th'到selector: [app-custom-th]，然后该组件更改为<th app-custom-th headerName="Key" ></th>