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

Answer 2

仅模板简单解决方案（当内容只有空格或换行符时，它可以处理这种情况）：

<div *ngIf="!wrapper.innerHTML.trim()">alternative content</div>

<div #wrapper>
  <ng-content></ng-content>
</div>`

如何为Angular中的空ng内容提供回退？

2 个答案: