In Angular 2 come verificare se è vuoto?

Supponiamo che io abbia un componente:

@Component({ selector: 'MyContainer', template: ` 
Display this if ng-content is empty!
` }) export class MyContainer { }

Ora, vorrei mostrare alcuni contenuti predefiniti se per questo componente è vuoto. C’è un modo semplice per farlo senza accedere direttamente al DOM?

Avvolgi il ng-content in un elemento HTML come un div per ottenere un riferimento locale ad esso, quindi associa l’espressione ref.children.length == 0 a ref.children.length == 0 :

 template: `
Display this if ng-content is empty! `

Inject elementRef: ElementRef e controlla se elementRef.nativeElement ha figli. Questo potrebbe funzionare solo con l’ encapsulation: ViewEncapsulation.Native .

Avvolgi il e controlla se ha figli. Questo non funziona con l’ encapsulation: ViewEncapsulation.Native .

 

e controlla se ha bambini

 @ViewChild('contentWrapper') contentWrapper; ngAfterViewInit() { contentWrapper.nativeElement.childNodes... } 

(non testato)

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

Esempio di lavoro:

   Content if empty  

Quando si inietta il contenuto, aggiungi una variabile di riferimento:

 
Some Content

e nella class del componente ottieni un riferimento al contenuto inserito con @ContentChild ()

 @ContentChild('content') content: ElementRef; 

quindi nel modello di componente è ansible verificare se la variabile di contenuto ha un valore

 
Display this if ng-content is empty!