如何在Angular中为空的ng-content提供备用选项？

Question

假设我有一个组件它可以在模板中接受ng-content:

但是，如果没有提供ng-content内容，我想让组件显示一些默认内容作为后备。是否有一种像*ngIf这样的指令，可以测试ng-content是否为空？

- user776686

---

没有什么是开箱即用的，你可以使用的。 - Günter Zöchbauer

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

- Günter Zöchbauer

---

这对我没有用。我在这里找到了解决方案：https://dev59.com/T1sW5IYBdhLWcg3wVV_j#48788194 - Ross Brasseaux

Answer 2

仅模板解决方案（处理SSR和内容只包含空格或换行符的情况）：

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

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

- Kamil Kiełczewski

---

@Azarus，你能提供另一种解决方案来处理只有空格行/换行符的内容，而不使用本地浏览器DOM元素吗？（并且不要忘记@ContentChild('wrapper') wrapper:ElementRef;也会返回本地浏览器DOM元素） - Kamil Kiełczewski

Angular确实提供了对DOM属性的本地访问，但我称之为“Angular方式”综合症。例如，上面的代码可能在SSR方面出现问题。要安全地访问这些属性，您唯一能做的就是检查平台是否是浏览器的UI线程，否则请跳过该代码。此外，为了操作DOM，推荐使用renderer2。 - Playdome.io

@Azarus 我更新了回答，以处理 #wrapper 不包含 innerHTML 属性的情况（作为检查平台是否为浏览器的方式）- 现在这段代码是安全的，不应该破坏 SSR。@ContentChild 方法（并不差）有同样的问题，可能需要类似的解决方案。 - Kamil Kiełczewski

更新后的答案非常好。希望它能尽快从负面评价中恢复过来！ - Fábio Batista