Yocker
  1. Yocker
  3. In Angular 2 come verificare se è vuoto?
Intereting Posts
C # mantiene l’ID di sessione su httpwebrequest Perché wait () e notify () sono dichiarati nella class Object di Java? Come indirizzare una pagina .aspx nel progetto asp.net mvc 3? funzione mappa per oggetti (anziché array) Calcola l’hash MD5 di una stringa UTF8 Citazione di fuga nella stringa di connessione web.config $ on e $ broadcast in angular Codice per il looping di tutti i file excel in una cartella specificata e estrazione di dati da celle specifiche Metodi opzionali nell’interfaccia Java C’è un modo per ottenere tutte le coppie nome / valore di querystring in una collezione? Un modo semplice per rimuovere gli accenti da una stringa Unicode? Caricamento di form di dati Webapi (su DB) con parametri aggiuntivi Rileva il display Retina “INSERT IGNORE” vs “INSERT … ON DUPLICATE KEY UPDATE” Come posso inviare un testo colorato a un terminale Linux?

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!