如何检查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>

我想让面板标题成为可选的。如果没有为<ng-content select="my-panel-heading"></ng-content>提供内容，如何隐藏<div class="panel-heading">元素

Answer 1

如果您有一个带有模板变量(#panelHeading)的<ng-content>父元素

<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

你必须删除你所有的空间，但是如果你真的关心它，你可以用CSS做到这一点(ng-content不会占用空间)：

.panel-heading:empty { display: none }

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

Answer 3

执行以下操作：

<div class="panel panel-default">
  <div class="panel-heading" [hidden]="!panelHeading.hasChildNodes()" #panelHeading>
    <ng-content select="my-panel-heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select="my-panel-content"></ng-content>
  </div>
</div>

注意:在这种情况下，您不能使用*ngIf，以应对22条军规的情况。