如何在 Angular 中为空的 ng-content 提供后备？答案

【问题标题】：How to provide a fallback for empty ng-content in Angular?如何在 Angular 中为空的 ng-content 提供后备？
【发布时间】：2017-07-19 03:22:33
【问题描述】：

说，我有一个在其模板中接受 ng-content 的组件：

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

【问题讨论】：

没有什么是开箱即用的，你可以使用

标签： angular

【解决方案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;
  }
}

【讨论】：

这对我不起作用。我在这里找到了解决方案：stackoverflow.com/a/48788194/1751792

【解决方案2】：

仅模板解决方案（它处理 SSR 以及内容只有空格或换行符的情况）：

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

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

【讨论】：

@Azarus 您能否提供替代解决方案来处理内容只有空格换行符而不使用本机浏览器 DOM 元素的情况？（别忘了@ContentChild('wrapper') wrapper:ElementRef; 也返回本机浏览器 DOM 元素）
确实 Angular 提供了对 DOM 属性的本地访问，但我称之为“角度方式”综合症。例如，上面的代码可能会与 SSR 中断。唯一可以安全访问此属性的方法是检查平台是否是浏览器 ui 线程，否则跳过代码。为了操作 DOM，renderer2 也是首选。
@Azarus 我更新答案以处理#wrapper 不包含innerHTML 属性的情况（作为检查平台是否为浏览器的方式） - 现在此代码是安全的，不应破坏 SSR . @ContentChild 方法（还不错）有同样的问题，可能需要类似的解决方案。
更新的答案非常好。希望它能尽快从反对票中恢复过来！