如何检查ng-content是否存在

Question

假设我有简单的Bootstrap面板组件,带有多个转换插槽.模板示例:

<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>

我想让panel-heading可选.<div class="panel-heading">如果没有提供内容,我如何隐藏元素<ng-content select="my-panel-heading"></ng-content>

Answer 1

如果你的父元素<ng-content>带有模板变量(#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;

并根据是否有孩子设置属性

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组件,那么您也可以使用

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

ngAfterViewInit() {
  this.showHeading = this.panelHeading != null;
  this.cdRef.detectChanges();
}

Answer 2

您必须删除所有空间,但如果您真的关心它(ng-content不占用空间),您可以使用CSS执行此操作:

.panel-heading:empty { display: none }

<div class="panel-heading"><ng-content select="my-panel-heading"></ng-content></div>