在nativescript-angular中，如何检查<ng-content>是否为空？

Question

在我的nativescript-angular项目中，我有一个像这样的组件：

<StackLayout>
    <Label *ngIf="ngContentIsEmpty"> ng-content is empty </Label>
    <ng-content></ng-content>
</StackLayout>

现在，如果此组件的<ng-content>为空，我想显示一些内容。有没有简便的方法？

我已经尝试过了，但是不能在本机脚本中工作：

<StackLayout #wrapper>
    <Label *ngIf="wrapper.childNodes.length == 0"> ng-content is empty </Label>
    <ng-content></ng-content>
</StackLayout>

Answer 1

请尝试检查 ng-content 是否为空。

添加HTML文件：-

<StackLayout *ngIf="ngContentIsEmpty">Content</StackLayout>
<StackLayout #wrapper>
    <ng-content></ng-content>
</StackLayout>

在TypeScript文件中：-

export class MyComponent implements OnInit, AfterContentInit {

  @ContentChild('wrapper') wrapper:ElementRef;
  public ngContentIsEmpty = false;

  ngAfterContentInit() {
   this.ngContentIsEmpty= this.wrapper.childNodes.length > 0;
  }

}