Angenommen, ich habe eine Komponente:

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

Jetzt möchte ich einige Standardinhalte anzeigen, wenn <ng-content>diese Komponente leer ist. Gibt es eine einfache Möglichkeit, dies zu tun, ohne direkt auf das DOM zuzugreifen?

Schließen Sie ng-contentein HTML-Element wie ein ein div, um einen lokalen Verweis darauf zu erhalten, und binden Sie den ngIfAusdruck dann an 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>`

In @pixelbits fehlen einige Antworten. Wir müssen nicht nur die childrenEigenschaft überprüfen , da Zeilenumbrüche oder Leerzeichen in der übergeordneten Vorlage ein childrenElement mit leerem Text \ Zeilenumbruch verursachen. Besser zu überprüfen .innerHTMLund .trim()es.

Arbeitsbeispiel:

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

EDIT 17.03.2020

Reines CSS (2 Lösungen)

Stellt Standardinhalte bereit, wenn nichts in ng-content projiziert wird.

Mögliche Selektoren:

1. :only-childWähler. Siehe diesen Beitrag hier :: only-child Selector

   ^{Dieser erfordert weniger Code / Markup. Unterstützung seit IE 9: Kann ich verwenden: nur Kind}

2. :emptyWähler. Lesen Sie einfach weiter.

   ^{Unterstützung von IE 9 und teilweise seit 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;
}

Falls es nicht funktioniert

Beachten Sie, dass mindestens ein Leerzeichen nicht leer ist. Angular entfernt Leerzeichen, aber nur für den Fall, dass dies nicht der Fall ist:

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

oder

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

Wenn Sie den Inhalt einfügen, fügen Sie eine Referenzvariable hinzu:

<div #content>Some Content</div>

und in Ihrer Komponentenklasse erhalten Sie mit @ContentChild () einen Verweis auf den injizierten Inhalt

@ContentChild('content') content: ElementRef;

In Ihrer Komponentenvorlage können Sie also überprüfen, ob die Inhaltsvariable einen Wert hat

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

Injizieren elementRef: ElementRefund prüfen, ob elementRef.nativeElementKinder vorhanden sind. Dies funktioniert möglicherweise nur mit encapsulation: ViewEncapsulation.Native.

Wickeln Sie das <ng-content>Tag ein und prüfen Sie, ob es Kinder hat. Das funktioniert nicht mit encapsulation: ViewEncapsulation.Native.

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

und überprüfen Sie, ob es Kinder hat

@ViewChild('contentWrapper') contentWrapper;

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

(nicht getestet)

Wenn Sie einen Standardinhalt anzeigen möchten, verwenden Sie nicht einfach den Selektor "Nur Kind" von CSS.

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

für zB: HTML

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

CSS

.default-content {
   display: none;
}

.default-content:only-child {
   display: block;
}

In meinem Fall muss ich Eltern von leeren ng-Inhalten verstecken:

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

Einfache CSS funktioniert:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Ich habe eine Lösung mit @ContentChildren Decorator implementiert , die der Antwort von @ Lerner irgendwie ähnlich ist.

Laut Docs hat dieser Dekorateur:

Rufen Sie die QueryList der Elemente oder Anweisungen aus dem Inhalts-DOM ab. Jedes Mal, wenn ein untergeordnetes Element hinzugefügt, entfernt oder verschoben wird, wird die Abfrageliste aktualisiert, und die in der Abfrageliste beobachtbaren Änderungen geben einen neuen Wert aus.

Der erforderliche Code in der übergeordneten Komponente lautet also:

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

In der Komponentenklasse:

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

Dann in der Komponentenvorlage:

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

Vollständiges Beispiel : https://stackblitz.com/edit/angular-jjjdqb

Ich habe diese Lösung in Winkelkomponenten, implementiert gefunden matSuffix, in der Form-Feld - Komponente.

In der Situation, in der der Inhalt der Komponente später nach der Initialisierung der App eingefügt wird, können wir auch eine reaktive Implementierung verwenden, indem wir das changesEreignis abonnieren 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();
  }

}

Vollständiges Beispiel : https://stackblitz.com/edit/angular-essvnq

Mit Angular 10 hat es sich leicht geändert. Sie würden verwenden:

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