Bir bileşenim olduğunu varsayalım:

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

Şimdi, <ng-content>bu bileşen için boşsa bazı varsayılan içeriği görüntülemek istiyorum . DOM'a doğrudan erişmeden bunu yapmanın kolay bir yolu var mı?

Yerel bir referans almak için a ng-contentgibi bir HTML öğesini sarın div, ardından ngIfifadeyi şuna bağlayın 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 yanıtında bazı eksikler var. childrenÜst şablondaki herhangi bir satır sonu veya boşluk childrenboş metin \ satır sonu içeren öğelere neden olacağı için sadece özelliği kontrol etmemiz gerekir . Kontrol etmek daha iyi .innerHTMLve .trim()onu.

Çalışma örneği:

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

17.03.2020 DÜZENLEME

Saf CSS (2 çözüm)

Ng içeriğine hiçbir şey yansıtılmazsa varsayılan içeriği sağlar.

Olası seçiciler:

1. :only-childseçici. Bu gönderiye buradan bakın : only-child Selector

   ^{Bu, daha az kod / işaret gerektirir. IE 9'dan beri destek: Kullanabilir miyim: only-child}

2. :emptyseçici. Sadece daha fazlasını okuyun.

   ^{IE 9'dan ve kısmen IE 7 / 8'den beri destek: 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;
}

Çalışmaması durumunda

En az bir boşluğa sahip olmanın boş olmadığı kabul edildiğini unutmayın. Angular, beyaz boşluğu kaldırır, ancak tam olarak değilse:

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

veya

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

İçeriği enjekte ettiğinizde bir referans değişkeni ekleyin:

<div #content>Some Content</div>

ve bileşen sınıfınızda @ContentChild () ile enjekte edilen içeriğe bir referans alın

@ContentChild('content') content: ElementRef;

böylece bileşen şablonunuzda içerik değişkeninin bir değeri olup olmadığını kontrol edebilirsiniz

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

Enjekte edin elementRef: ElementRefve elementRef.nativeElementçocuk olup olmadığını kontrol edin . Bu sadece işe yarayabilir encapsulation: ViewEncapsulation.Native.

<ng-content>Etiketi sarın ve alt öğesi olup olmadığını kontrol edin. Bu işe yaramıyor encapsulation: ViewEncapsulation.Native.

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

ve çocuğu olup olmadığını kontrol edin

@ViewChild('contentWrapper') contentWrapper;

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

(test edilmedi)

Varsayılan bir içeriği görüntülemek istiyorsanız, neden css'deki 'tek çocuk' seçiciyi kullanmıyorsunuz?

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

örneğin: HTML

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

css

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

Angular 10 ile biraz değişti. Kullanacaksın:

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

Benim durumumda boş ng içeriğinin üst öğesini gizlemeliyim:

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

Basit css çalışır:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

@ContentChildren dekoratörünü kullanarak bir çözüm uyguladım , bu bir şekilde @ Lerner'ın cevabına benzer.

Belgelere göre , bu dekoratör:

İçerik DOM'dan öğeler veya yönergelerin QueryList'ini alın. Bir alt öğe eklendiğinde, kaldırıldığında veya taşındığında, sorgu listesi güncellenecek ve sorgu listesindeki gözlemlenebilir değişiklikler yeni bir değer yayınlayacaktır.

Dolayısıyla, üst bileşendeki gerekli kod şöyle olacaktır:

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

Bileşen sınıfında:

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

Ardından, bileşen şablonunda:

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

Tam örnek : https://stackblitz.com/edit/angular-jjjdqb

Bu çözümü matSuffix, form alanı bileşeni için açısal bileşenlerde uygulanmış buldum .

Bileşenin içeriği daha sonra enjekte edilen durumda, sonra uygulama başlatıldığını, biz de abone olarak, reaktif bir uygulama kullanabilirsiniz changesdurumunda 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();
  }

}

Tam örnek : https://stackblitz.com/edit/angular-essvnq