Ist es möglich, bedingte Content-Projektion (Transclusion) in Winkel 2+

Question

zu tun Ich würde gerne Standard-Content zur Verfügung stellen, die nur erscheinen würde, wenn der Inhalt nicht übertragen wird.

Zum Beispiel Hier ist meine Komponentenvorlage:

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

Was nun, wenn ich einen Standard-Header zur Verfügung zu stellen wollte:

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

ich es so verwenden kann. Ist es möglich; ohne Akrobatik wie Überprüfung auf Inhalt in ngAfterContentInit?

Answer 1

Sie können dies mit reinem CSS tun! wenn der Inhalt geliefert Stellen Sie sich das folgende

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

dann die folgende CSS die Header würde verstecken:

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

Wenn kein Kopfzugeführt wird, dann wird die Anzeige: keine Regel nicht angepasst ist .

Hinweis, werden Sie diese Inhalte Verkapselung deaktivieren verwenden müssen: encapsulation: ViewEncapsulation.None