css - Angular 自定义组件上的样式封装

Question

我正在为 th 开发一个组件，现在它只是一个带有图标的 th:

custom-th.component.html

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

custom-th.component.scss

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

custom-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 的样式与其他非自定义 th 不同。我对view encapsulation的理解none 是全局样式(在我的例子中可能来自其他组件或 Bootstrap )可以应用于我的主机组件及其子组件。如果我将 HTML 放在主机组件之外并将其直接放入我的 HTML 中，它会按预期工作/看起来。

带有自定义组件

不使用自定义组件的自定义组件的 html(期望的结果)

根据 Firefox 的检查器，自定义组件大约为 25x20，因此设置 100% 宽度和高度不会改变任何内容。如果我以像素为单位设置宽度，我会得到一个结果，但整个单元格会变得更大(我不确定为什么会这样)。

火狐检查

Answer 1

来自 yurzui : 您不能在 tr 中使用自定义元素.但是我们可以在 th 中包含自定义组件和 td ，所以选择器从:

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