我想提供仅在内容未被嵌入时才会出现的默认内容。
例如,这是我的组件模板:
<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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)