是否可以在角度2中进行条件内容投影(包含)

发布时间：2020-12-17 08:48:46 所属栏目：安全来源：网络整理

导读：我想提供仅在内容未被转换时才会出现的默认内容. 例如,这是我的组件模板： article header ng-content select="[header]"/ng-content /header section ng-content/ng-content /section/article 我可以像这样使用它： my-component h1 headerThis is my heade

我想提供仅在内容未被转换时才会出现的默认内容.

例如,这是我的组件模板：

<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中的内容？

你可以用纯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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!