Załóżmy, że mam komponent:

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

Teraz chciałbym wyświetlić domyślną zawartość, jeśli <ng-content>ten komponent jest pusty. Czy istnieje łatwy sposób na zrobienie tego bez bezpośredniego dostępu do DOM?

Zawiń ng-contentelement HTML, taki jak a, divaby uzyskać lokalne odwołanie do niego, a następnie powiąż ngIfwyrażenie z 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>`

Brakuje niektórych w odpowiedzi @pixelbits. Musimy sprawdzić nie tylko childrenwłaściwość, ponieważ wszelkie podziały wierszy lub spacje w szablonie nadrzędnym spowodują, że childrenelement z pustym tekstem \ podziałami wiersza. Lepiej to sprawdzić .innerHTMLi .trim()to.

Przykład pracy:

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

EDYCJA 17.03.2020

Pure CSS (2 rozwiązania)

Zapewnia domyślną zawartość, jeśli nic nie jest rzutowane na zawartość ng-content.

Możliwe selektory:

1. :only-childselektor. Zobacz ten post tutaj :: only-child Selector

   ^{Ten wymaga mniej kodu / znaczników. Wsparcie od IE 9: Can I Use: only-child}

2. :emptyselektor. Przeczytaj dalej.

   ^{Wsparcie z IE 9 i częściowo od 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;
}

Na wypadek, gdyby to nie działało

Należy pamiętać, że posiadanie co najmniej jednej spacji jest uważane za niepuste. Angular usuwa spacje, ale na wszelki wypadek, jeśli tak nie jest:

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

lub

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

Po wstrzyknięciu zawartości dodaj zmienną odniesienia:

<div #content>Some Content</div>

aw swojej klasie komponentu pobierz odwołanie do wstrzykniętej zawartości za pomocą @ContentChild ()

@ContentChild('content') content: ElementRef;

więc w szablonie komponentu możesz sprawdzić, czy zmienna zawartości ma wartość

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

Wstrzyknij elementRef: ElementRefi sprawdź, czy elementRef.nativeElementnie ma dzieci. To może działać tylko z encapsulation: ViewEncapsulation.Native.

Owiń <ng-content>tag i sprawdź, czy ma dzieci. To nie działa z encapsulation: ViewEncapsulation.Native.

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

i sprawdź, czy ma dzieci

@ViewChild('contentWrapper') contentWrapper;

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

(nie testowany)

Jeśli chcesz wyświetlić domyślną zawartość, dlaczego nie, po prostu użyj selektora „only-child” z css.

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

na przykład: HTML

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

css

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

W Angular 10 nieco się to zmieniło. Użyłbyś:

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

W moim przypadku muszę ukryć rodzica pustej zawartości ng:

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

Proste działanie CSS:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Wdrożyłem rozwiązanie za pomocą dekoratora @ContentChildren , które jest w pewnym sensie podobne do odpowiedzi @ Lernera.

Według dokumentów ten dekorator:

Pobierz QueryList elementów lub dyrektyw z zawartości DOM. Za każdym razem, gdy element podrzędny jest dodawany, usuwany lub przenoszony, lista zapytań zostanie zaktualizowana, a obserwowane zmiany na liście zapytań będą emitować nową wartość.

Zatem niezbędnym kodem w komponencie nadrzędnym będzie:

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

W klasie komponentów:

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

Następnie w szablonie komponentów:

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

Pełny przykład : https://stackblitz.com/edit/angular-jjjdqb

Znalazłem to rozwiązanie zaimplementowane w komponentach kątowych, dla matSuffix, w polu formularza komponencie .

W sytuacji, gdy zawartość komponentu jest wstrzykiwana później, po zainicjowaniu aplikacji, możemy również skorzystać z implementacji reaktywnej, subskrybując changeszdarzenie 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();
  }

}

Pełny przykład : https://stackblitz.com/edit/angular-essvnq