角度2で条件付きコンテンツ投影（トランジション）を行うことは可能ですか？

Question

コンテンツが継承されない場合にのみ表示されるデフォルトコンテンツを提供したいと思います。例えば

ここでは私のコンポーネントテンプレートです：

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

私はこのようにそれを使用することができます：今、私はデフォルトのヘッダーを提供したい場合

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

。出来ますか; ngAfterContentInitにコンテンツをチェックするようなアクロバットはありませんか？

Answer 1

純粋なCSSでこれを行うことができます！何のヘッダが供給されていない場合

は

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

、その後、ディスプレイ：なしルールが一致しないコンテンツが供給されているならば、以下のCSSは、ヘッダを隠すでしょう

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

以下のあなたが持っている想像 。

注意、あなたはこれを使用するために、コンテンツのカプセル化をオフにする必要があります：encapsulation: ViewEncapsulation.None