Misalkan saya memiliki komponen:

@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 {
}

Sekarang, saya ingin menampilkan beberapa konten default jika <ng-content>untuk komponen ini kosong. Adakah cara mudah untuk melakukan ini tanpa mengakses DOM secara langsung?

Gabungkan ng-contentelemen HTML seperti a divuntuk mendapatkan referensi lokal, lalu ikat ngIfekspresi ke 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>`

Ada beberapa yang hilang dalam jawaban @pixelbits. Kita tidak hanya perlu memeriksa childrenproperti, karena setiap jeda baris atau spasi di template induk akan menyebabkan childrenelemen dengan teks kosong \ linebreaks. Lebih baik periksa .innerHTMLdan .trim()itu.

Contoh kerja:

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

EDIT 17.03.2020

CSS murni (2 solusi)

Menyediakan konten default jika tidak ada yang diproyeksikan ke ng-content.

Penyeleksi yang memungkinkan:

1. :only-childpemilih. Lihat posting ini di sini :: Only-child Selector

   ^{Yang ini membutuhkan lebih sedikit kode / markup. Dukungan sejak IE 9: Can I Use: only-child}

2. :emptypemilih. Baca lebih lanjut.

   ^{Dukungan dari IE 9 dan sebagian sejak 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;
}

Seandainya itu tidak berfungsi

Ketahuilah, bahwa memiliki setidaknya satu spasi kosong dianggap tidak kosong. Angular menghapus spasi, tetapi untuk berjaga-jaga jika tidak:

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>

atau

<div class="wrapper"><ng-content select="my-component"></ng-content</div>

Saat Anda memasukkan konten, tambahkan variabel referensi:

<div #content>Some Content</div>

dan di kelas komponen Anda dapatkan referensi ke konten yang diinjeksi dengan @ContentChild ()

@ContentChild('content') content: ElementRef;

jadi di template komponen Anda, Anda dapat memeriksa apakah variabel konten memiliki nilai

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div> 

Suntikkan elementRef: ElementRefdan periksa apakah elementRef.nativeElementmemiliki anak. Ini mungkin hanya bekerja dengan encapsulation: ViewEncapsulation.Native.

Bungkus <ng-content>label dan periksa apakah ada anak-anak. Ini tidak berhasil encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>
  <ng-content></ng-content>
</div>

dan periksa apakah memiliki anak

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(tidak diuji)

Jika Anda ingin menampilkan konten default mengapa Anda tidak menggunakan pemilih 'anak tunggal' dari css.

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

misalnya: HTML

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

css

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

Dengan Angular 10, ini sedikit berubah. Anda akan menggunakan:

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

Dalam kasus saya, saya harus menyembunyikan induk dari ng-konten kosong:

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

Pekerjaan css sederhana:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Saya telah menerapkan solusi dengan menggunakan dekorator @ContentChildren , yang entah bagaimana mirip dengan jawaban @ Lerner.

Menurut dokumen , dekorator ini:

Dapatkan QueryList elemen atau arahan dari DOM konten. Setiap kali elemen turunan ditambahkan, dihapus, atau dipindahkan, daftar kueri akan diperbarui, dan perubahan yang dapat diamati dari daftar kueri akan mengeluarkan nilai baru.

Jadi kode yang diperlukan dalam komponen induk adalah:

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

Di kelas komponen:

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

Kemudian, di template komponen:

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

Contoh lengkap : https://stackblitz.com/edit/angular-jjjdqb

Saya telah menemukan solusi ini diimplementasikan dalam komponen sudut, untuk matSuffix, dalam komponen bidang formulir .

Dalam situasi ketika konten komponen dimasukkan nanti, setelah aplikasi diinisialisasi, kita juga dapat menggunakan implementasi reaktif, dengan berlangganan ke changesperistiwa 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();
  }

}

Contoh lengkap : https://stackblitz.com/edit/angular-essvnq