如何检查ng-content是否存在 [英] How to check whether ng-content exists
问题描述
假设我有一个带有多个包含插槽的简单Bootstrap面板组件.模板示例:
Suppose i have simple Bootstrap panel component with multiple transclusion slots. Template example:
<div class="panel panel-default">
<div class="panel-heading">
<ng-content select="my-panel-heading"></ng-content>
</div>
<div class="panel-body">
<ng-content select="my-panel-content"></ng-content>
</div>
</div>
我想使面板标题为可选.如果没有为<ng-content select="my-panel-heading"></ng-content>
I want to make panel-heading optional. How do i hide <div class="panel-heading">
element, if there is no content provided for <ng-content select="my-panel-heading"></ng-content>
推荐答案
如果您的<ng-content>
父元素带有模板变量(#panelHeading
)
If you have a parent element of <ng-content>
with a template variable (#panelHeading
)
<div class="panel panel-default">
<div class="panel-heading" #panelHeading [hidden]="!showHeading">
<ng-content select="my-panel-heading"></ng-content>
</div>
<div class="panel-body">
<ng-content select="my-panel-content"></ng-content>
</div>
</div>
然后您可以像查询
@ViewChild('panelHeading') panelHeading;
并根据是否有孩子来设置属性
and set a property depending on whether there are children or not
constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0;
this.cdRef.detectChanges();
}
如果<my-panel-heading>
是Angular2组件,那么您也可以使用
If <my-panel-heading>
is an Angular2 component, then you can also use
@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;
constructor(private cdRef:ChangeDetectorRef) {}
showHeading:boolean = false;
ngAfterViewInit() {
this.showHeading = this.panelHeading != null;
this.cdRef.detectChanges();
}
这篇关于如何检查ng-content是否存在的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!