angular - 是否可以在 Angular 2+ 中进行条件内容投影(包含)

Question

我想提供只有在内容未被嵌入时才会出现的默认内容。

例如这是我的组件模板:

<article>
    <header>
        <ng-content select="[header]"></ng-content>
    </header>
    <section>
        <ng-content></ng-content>
    </section>
</article>

我可以这样使用它:

<my-component>
    <h1 header>This is my header</h1>
    <p>This is my content</p>
</my-component>

现在如果我想提供默认 header 怎么办。是否可以;没有杂技，比如检查 ngAfterContentInit 中的内容？

Answer 1

您可以使用纯 CSS 来做到这一点!假设您有以下内容

<ng-content select=".header"></ng-content>
<h1 class="default-header">
     This is my default header
</h1>

如果提供了内容，则以下 CSS 将隐藏 header :

.header + .default-header {
    display: none;
}

如果未提供 header ，则不匹配 display:none 规则。

请注意，您必须关闭内容封装才能使用它:encapsulation: ViewEncapsulation.None