Question

我现在很困，我不知道解决问题的办法。

我有一些自己的组件，这些组件充满了内容投影和多时隙插入。

例如，我有一个Card（引导程序），并且想要在模板中设置一些内容，例如页眉，正文或简单的页脚。

<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>

如您所见，没有正文，只有卡片列表和标题。但是身体被渲染。如何检查广告位是否有内容？如果插槽ist为空，则它应该不可见。

示例： Rendered userlist (component)

黄色部分是空的“ card-body”插槽，该插槽是空的，但已渲染并放入dom。

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

Answer 1

为此找到了一种破解方法。我的问题来自角度元素。即使插槽为空，DOM元素仍然存在。

所以，如果广告位的类是标题-在CSS中，我就这样做了

.title:empty { display: none }

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

检查已包含内容的插槽是否为空

1 个答案: