假设我有一个组件：

@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像这样包装HTML元素div以获取对其的本地引用，然后将ngIf表达式绑定到ref.children.length == 0：

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf="ref.nativeElement.childNodes.length == 0">
              Display this if ng-content is empty!
           </span>`

@pixelbits答案中有一些缺失。我们不仅需要检查children属性，因为父模板中的任何换行符或空格都会导致children元素的文本\换行符为空白。更好地检查.innerHTML和.trim()它。

工作示例：

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

编辑17.03.2020

纯CSS（2个解决方案）

如果未将任何内容投影到ng-content中，则提供默认内容。

可能的选择器：

1. :only-child选择器。在这里看到这篇文章：：only-child Selector

   ^{这需要较少的代码/标记。从IE 9开始支持：我可以使用：only-child}

2. :empty选择器。只是进一步阅读。

   ^{来自IE 9的支持以及部分自IE 7/8的支持：https : //caniuse.com/#feat=css-sel3}

的HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

的CSS

.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>

注入内容时，请添加参考变量：

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

（未测试）

如果要显示默认内容，为什么不使用CSS中的“独生子”选择器。

https://www.w3schools.com/cssref/sel_only-child.asp

例如：HTML

<div>
  <ng-content></ng-content>
  <div class="default-content">I am deafult</div>
</div>

的CSS

.default-content:not(:only-child) {
   display: none;
}

就我而言，我必须隐藏空白ng-content的父级：

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

简单的CSS作品：

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

我已经通过使用@ContentChildren实现了一个解决方案装饰器某种程度上类似于的答案。

根据docs，此装饰器：

从内容DOM获取元素或指令的QueryList。每当添加，删除或移动子元素时，查询列表都将更新，并且查询列表的可观察到的更改将发出新值。

因此，父组件中的必要代码将是：

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

在组件类中：

@ContentChildren('myComponentContent') content: QueryList<ElementRef>;

然后，在组件模板中：

<div class="container">
  <ng-content></ng-content>
  <span *ngIf="*ngIf="!content.length""><em>Display this if ng-content is empty!</em></span>
</div>

完整示例：https : //stackblitz.com/edit/angular-jjjdqb

我发现这个解决方案在角分量实现为matSuffix，在表单字段组件。

在稍后注入组件内容的情况下，在应用初始化之后，我们还可以通过订阅以下changes事件来使用响应式实现QueryList：

export class MyComponentComponent implements AfterContentInit, OnDestroy {
  private _subscription: Subscription;
  public hasContent: boolean;

  @ContentChildren('myComponentContent') content: QueryList<ElementRef>;

  constructor() {}

  ngAfterContentInit(): void {
    this.hasContent = (this.content.length > 0);
    this._subscription = this.content.changes.subscribe(() => {
      // do something when content updates
      //
      this.hasContent = (this.content.length > 0);
    });
  }

  ngOnDestroy() {
    this._subscription.unsubscribe();
  }

}

完整示例：https : //stackblitz.com/edit/angular-essvnq

在Angular 10中，它做了些微的更改。您将使用：

<div #ref><ng-content></ng-content></div> 
<span *ngIf="ref.children.length == 0">
  Display this if ng-content is empty!
</span>