In Angular 2 come verificare se <ng-content> è vuoto?

Question

Supponiamo che io sono un componente:

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

Ora, vorrei visualizzare alcuni contenuti di default se <ng-content> per questo componente è vuoto. C'è un modo semplice per farlo senza accedere direttamente al DOM?

Answer 1

Wrap ng-content in un elemento HTML come un div per ottenere un riferimento locale ad esso, quindi associare il ngIf espressione a ref.children.length == 0:

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

Answer 2

Iniettare elementRef: ElementRef e verificare se elementRef.nativeElement ha bambini. Questo potrebbe funzionare solo con encapsulation: ViewEncapsulation.Native.

Avvolgere il tag <ng-content> e verificare se ha bambini. Questo non funziona con encapsulation: ViewEncapsulation.Native.

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

e verificare se ha dei figli

@ViewChild('contentWrapper') contentWrapper; 

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

(non testato)

Answer 3

Alcuni mancano nella risposta @pixelbits. Dobbiamo verificare non solo la proprietà children, perché qualsiasi interruzione di linea o spazi nel modello principale causerà l'elemento children con testo \ interruzioni di riga vuote. Meglio controllare .innerHTML e .trim() it.

esempio di lavoro:

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