Koşullu içerik projeksiyonunu (transclusion) açısal 2+

Question

içinde yapmak mümkün mü? Yalnızca içerik aktarılmadığında görünecek varsayılan içerik sağlamak istiyorum.

<article> 
    <header> 
     <ng-content select="[header]"></ng-content> 
    </header> 
    <section> 
     <ng-content></ng-content> 
    </section> 
</article> 

bu gibi kullanabilirsiniz: Örneğin:

İşte benim bileşen şablon

<my-component> 
    <h1 header>This is my header</h1> 
    <p>This is my content</p> 
</my-component> 

i varsayılan bir başlık sağlamayı istiyorsa Şimdi ne olacak. Mümkün mü; ngAfterContentInit içeriğinde kontrol gibi akrobasi olmadan?

Answer 1

Bunu saf CSS ile yapabilirsiniz! Hiçbir başlık verilirse

.header + .default-header { 
    display: none; 
} 

ardından görüntü:: yok olana denk değildir içerik verilir o zaman aşağıdaki CSS başlığını saklasın

<ng-content select=".header"></ng-content> 
<h1 class="default-header"> 
    This is my default header 
</h1> 

aşağıdakilerin bulunması hayal .

Not, bu kullanmak için içerik kapsülleme kapatmak gerekir: