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!