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>

现在如果我想提供默认标头怎么办？可能吗;没有杂技，比如检查ngAfterContentInit中的内容？

Answer 1

你可以用纯CSS做到这一点！想象一下，你有以下

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

然后，如果提供了内容，则以下CSS将隐藏标题：

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

如果没有提供标题，则display：none规则不匹配。

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

Answer 2

这是可能的。

您应该将该组件配置为接受包含您要有条件地呈现的内容的 ng-template 元素。

更多信息https://angular.io/guide/content-projection#conditional-content-projection

是否可以在角度2+中进行条件内容投影（包含）

2 个答案: