コンポーネントがあるとします。

@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要素に空白のtext \ linebreakが含まれるため、プロパティだけでなくチェックする必要があります。確認.innerHTMLし.trim()てください。

実例：

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

2020年3月17日編集

純粋なCSS（2つのソリューション）

ng-contentに何も投影されない場合、デフォルトのコンテンツを提供します。

可能なセレクター：

1. :only-childセレクタ。こちらの投稿をご覧ください:: only-child Selector

   ^{これはより少ないコード/マークアップを必要とします。IE 9以降のサポート：： only-childを使用できますか}

2. :emptyセレクタ。さらに読んでください。

   ^{IE9およびIE7 / 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;
}

それが機能していない場合

少なくとも1つの空白があると、空ではないと見なされることに注意してください。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;

したがって、コンポーネントテンプレートで、コンテンツ変数に値があるかどうかを確認できます

<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の「only-child」セレクターを使用しないでください。

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デコレータを使用してソリューションを実装しました。これは、@ Lernerの回答に似ています。

ドキュメントによると、このデコレータは次のとおりです。

コンテンツ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>