如何检查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 可选。如果没有为 <ng-content select="my-panel-heading"></ng-content>

提供内容，我该如何隐藏 <div class="panel-heading"> 元素

Answer 1

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

并根据有无children设置一个属性

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

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

.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 条军规。

如何检查ng-content是否存在

How to check whether ng-content exists

transclusion

angular