Angular 如何检查ng内容是否存在

假设我有一个简单的引导面板组件和多个转置插槽。模板示例：

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

---

我想使面板标题可选。如果没有为

提供内容，如果您有一个带有模板变量（

#panelHeading

）的

父元素，如何隐藏

元素

并根据是否有子对象设置属性

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

ngAfterViewInit() {
  this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0;
  this.cdRef.detectChanges();
}

如果

是Angular2组件，则也可以使用

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

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

---

您必须删除所有空间，但如果您真的关心CSS，您可以使用CSS来删除（ng内容不会占用空间）：

。面板标题：空{显示：无}

执行以下操作：

---

注意：在这种情况下，对于第22条军规的情况，您不能使用

*ngIf

。

ngIf

应优先于

[hidden]

。是否有您喜欢隐藏的原因？@GünterZöchbauer如果变量showHeading初始化为false，则在调用ngAfterContentInit时，元素将从模板中删除，并引用viewChild undefined。如果首选ngIf，您可以将showHeading的默认值更改为true，它应该可以工作。实际上，我刚刚测试了它，即使将默认值更改为true，它也无法与*ngIf一起工作。对#panelHeading的引用仍然是未定义的原因*ngIf删除了它。没有想到这一点。很好。通过将showHeading默认值设置为“false”，this.panelHeading为“未定义”。通过将showHeading默认值设置为“true”，它可以正常工作，但我在控制台中得到了“ExpressionChangedTerithasBeenCheckedError”。此外，我必须使用“ngAfterViewInit”而不是“ngAfterContentInit”，否则showHeading总是未定义的。有什么办法解决吗？Thx@Luca，谢谢你的反馈。我更新了我的答案。我认为现在

ngAfterViewInit

是正确的。我还更新了一些内容，可以解决您提到的问题。谢谢！对于我的解决方案，我更喜欢使用

*ngIf

而不是

hidden

，方法是将

showtheading

默认值设置为true。现在所有的工作都正常了：）在一些生命周期回调中，当模型在此回调中更改时，会导致异常（“模型在检查后已更改”或类似情况）。调用

detectChanges

修复此异常。好的，谢谢。我现在测试了它，并收到了那个错误。添加ChangeDetectorRef修复了它。此外，我必须先将showHeading设置为true，以使我的组件正常工作。这是一个很好的解决方案。简单高效。

：空的

是甜蜜的！谢谢@William Neely。这已经不起作用了。。。Angular正在最新版本中向我的div元素添加某种类型的元素。@muuvmuuv什么版本？解决了它。我无意中继承了父组件中的换行符。我不再使用Angular，但这看起来是最好的解决方案（如果可行的话）。关于

*ngIf

的提示是金色的。非常感谢你！

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

ngAfterViewInit() {
  this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0;
  this.cdRef.detectChanges();
}

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading;

constructor(private cdRef:ChangeDetectorRef) {}

showHeading:boolean = false;

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

.panel-heading:empty { display: none }

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

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