Angular 检查转包内容的插槽是否为空

我现在陷入困境，我不知道我的问题有什么解决办法

我有一些自己的组件，我用内容投影和多槽转换填充它们

在这个例子中，我有一张卡片（引导），希望在模板中设置一些内容，比如页眉、正文或简单的页脚

<div class="card"> 
<ng-content select="[card-header]">
<!-- Alles was hier eingefügt wird, ist weg :-) -->
</ng-content>

<ng-content select="[card-body]">
<!-- Alles was hier eingefügt wird, ist weg :-) -->
</ng-content>

<ng-content select="[card-list]">
<!-- Alles was hier eingefügt wird, ist weg :-) -->
</ng-content>
</div>

如果我知道如何使用我的组件，它将如下所示：

<vng-control-card>
                <span card-header>
                    <fa-icon [icon]="['fas','user']"></fa-icon> Benutzerliste
                </span>
                <div card-list>
                    <vng-control-userlist [showSendButtons]="false"></vng-control-userlist>
                </div>
            </vng-control-card>

贝努泽利斯特

正如你所看到的，没有正文，只有一张卡片列表和一个标题。但是身体被渲染了。如何检查插槽是否有任何内容？如果插槽为空，则它不应可见

例如：

黄色部分是空插槽“卡体”，它是空的，但被渲染并放入dom

---

有没有机会检查并避免这种情况？

发现了一种黑客攻击。我的问题是角度元素。即使插槽为空，DOM元素仍然存在

所以我这样做了，如果slot的类是title-in-css

.title:empty { display: none }

---

如果插槽为空，它将删除元素

我也遇到类似的问题，有解决方案吗？附言：-我发现了一些使用css:empty选择器的技巧。将在下面作为答案发布