Yocker
  1. Yocker
  3. In Angular 2 come verificare se è vuoto?
Intereting Posts
getElementsByTagName in JavaScript Come ottenere una riga a caso di un file di testo in Java? Colorazione condizionale delle cellule nella tabella Perché i runtime di JavaScript non sono in grado di gestire script asincroni dall’aspetto sincrono? bitmap rotanti. Nel codice Rinominare le colonne created_at, updated_at di ActiveRecord / Rails Classe helper JSP per la stampa di contenuti Come trovare tutti i collegamenti / pagine su un sito Web Come posso usare una condizione per impostare un valore variabile in Ansible? WPF: dispositivo di scorrimento con un evento che si triggers dopo il trascinamento di un utente Calcola un totale parziale in MySQL Problema di arrotondamento fiscale di Magento IRequiresSessionState vs IReadOnlySessionState Come evitare grandi if-statement e instanceof Perché sia ​​la class astratta che l’interfaccia esistono in C #?

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!