假设我有一个组件：
@Component({
selector: 'MyContainer',
template: `
<div class="container">
<!-- some html skipped -->
<ng-content></ng-content>
<span *ngIf="????">Display this if ng-content is empty!</span>
<!-- some html skipped -->
</div>`
})
export class MyContainer {
}
现在，如果<ng-content>此组件为空，我想显示一些默认内容。有没有一种简单的方法可以在不直接访问 DOM 的情况下做到这一点？
包裹ng-content在像 a 这样的 HTML 元素中div以获取对它的本地引用，然后将ngIf表达式绑定到ref.children.length == 0：
template: `<div #ref><ng-content></ng-content></div>
<span *ngIf=" ! ref.children.length">
Display this if ng-content is empty!
</span>`
为 Angular 12 更新；老逻辑（”
ref.nativeElement.childNodes.length“）给出了错误，因为nativeElement是undefined现在。
编辑 17.03.2020
如果没有任何内容投影到 ng-content 中，则提供默认内容。
:only-child选择器。在这里看到这篇文章：:only-child Selector
这个需要更少的代码/标记。自 IE 9 起支持：Can I Use :only-child
:empty选择器。只需进一步阅读。
来自 IE 9 和部分自 IE 7/8 的支持：https : //caniuse.com/#feat=css-sel3
<div class="wrapper">
<ng-content select="my-component"></ng-content>
</div>
<div class="default">
This shows something default.
</div>
.wrapper:not(:empty) + .default {
display: none;
}
如果它不起作用
请注意，至少有一个空格被认为不是空的。Angular 会删除空格，但以防万一：
<div class="wrapper"><!--
--><ng-content select="my-component"></ng-content><!--
--></div>
或者
<div class="wrapper"><ng-content select="my-component"></ng-content></div>
@pixelbits 答案中缺少一些内容。我们不仅需要检查children属性，因为父模板中的任何换行符或空格都会导致children元素出现空白文本\换行符。更好地检查.innerHTML和.trim()它。
工作示例：
<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
Content if empty
</span>
当您注入内容时，添加一个引用变量：
<div #content>Some Content</div>
并在您的组件类中使用 @ContentChild() 获取对注入内容的引用
@ContentChild('content') content: ElementRef;
所以在你的组件模板中，你可以检查 content 变量是否有一个值
<div>
<ng-content></ng-content>
<span *ngIf="!content">
Display this if ng-content is empty!
</span>
</div>
注射elementRef: ElementRef并检查是否elementRef.nativeElement有儿童。这可能只适用于encapsulation: ViewEncapsulation.Native.
包裹<ng-content>标签并检查它是否有孩子。这不适用于encapsulation: ViewEncapsulation.Native.
<div #contentWrapper>
<ng-content></ng-content>
</div>
并检查它是否有任何孩子
@ViewChild('contentWrapper') contentWrapper;
ngAfterViewInit() {
contentWrapper.nativeElement.childNodes...
}
（未测试）