如何为Angular中的空ng内容提供后备广告？

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 {
  @ContentChild('wrapper') wrapper:ElementRef;
  hasContent = false;
  ngAfterContentInit() {
    this.hasContent = this.wrapper.childNodes.length > 0;
  }
}