angular - 如何为 Angular 中的空 ng-content 提供回退？

Question

比如，我有一个组件在其模板中接受 ng-content:

但我希望组件显示一些默认内容作为后备，以防没有提供任何内容作为 ng-content。是否有 *ngIf 类型的指令可用于测试 ng-content 是否不为空？

Answer 1

您可以自己检查投影内容并在未找到时显示替代内容:

@Component({
  template: `
    <div *ngIf="hasContent">alternative content</div>
    <div #wrapper>
      <ng-content></ng-content>
    </div>
  `
})
class MyComponent implements AfterContentInit {
  @ContentChild('wrapper') wrapper:ElementRef;
  hasContent = false;
  ngAfterContentInit() {
    this.hasContent = this.wrapper.childNodes.length > 0;
  }
}