将angular-cdk表与bootstrap 4一起使用

Question

我正在使用Angular CDK table (没有Angular Material2)，并希望使用bootstrap table design来设置它的样式。

可以向CDK表添加类，但是引导规则直接处理html表元素tr、td、...Angular CDK使用自定义标记cdk-table、cdk-row、cdk-cell ...

作为快速而肮脏的解决方案，我为cdk元素编写了自己的规则，并从bootstrap源码中复制粘贴了大量内容。但是，有没有一种更好的、更适合未来的解决方案来自动继承CDK表的引导规则呢？

Answer 1

我使用了sass版本的bootstrap并为cdk-table添加了以下样式，获得了很好的效果：

.cdk-table { display: table; @extend table; }
.cdk-header-row { display: table-row; @extend thead; }
.cdk-header-cell { display: table-cell; @extend th; }
.cdk-row { display: table-row; @extend tr; }
.cdk-cell { display: table-cell; @extend td; }
.cdk-table.table-hover .cdk-row:hover { background-color: rgba(0, 0, 0, 0.075); }

Answer 2

我能够毫不费力地获得一个cdk表来使用bootstrap 4。假设您已经安装了bootstrap，只需在.component.scss文件中添加：

@import "~/bootstrap/scss/bootstrap"

您还可以将其添加到styles.scss文件中以使其成为全局文件。

然后在.component.html中：

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

Answer 3

我不相信有。Cdk表并不是一个真正的表元素。