2017-12-21 9 views
1

ラベリングタグを含めることなく、角度でスロットトランケーションを行う方法はありますか?例えばラッピングタグのない角度変換

:ここ

セレクタmy-componentと成分のテンプレートである:

<div class="my-component"> 
    <p class="some sensitive css-classes"> 
     <ng-content select="sub-header"></ng-content> 
    </p> 

    <p class="more sensitive css-classes"> 
     <ng-content select="sub-footer"></ng-content> 
    </p> 
</div> 

これはデータ

<my-component> 
    <sub-header> 
     Very <strong>important</strong> text with tags. 
    </sub-header> 

    <sub-footer> 
     More <em>important</em> text with tags. 
    </sub-footer> 
</my-component> 

とテンプレートでトランスクルー結果を充填した構成要素の一つでしたそうですね。

<div class="my-component"> 
    <p class="some sensitive css-classes"> 
     <sub-header> 
      Very <strong>important</strong> text with tags. 
     </sub-header> 
    </p> 

    <p class="more sensitive css-classes"> 
     <sub-footer> 
      More <em>important</em> text with tags. 
     </sub-footer> 
    </p> 
</div> 

これは意味論の、非常に便利なものではなく、非常に敏感なCSS-スタイルの場合

にどのように私はこのようになりますトランスクルーを取得することができます:

<div class="my-component"> 
    <p class="some sensitive css-classes"> 
     Very <strong>important</strong> text with tags. 
    </p> 

    <p class="more sensitive css-classes"> 
     More <em>important</em> text with tags. 
    </p> 
</div> 

他の質問からの主な違いはありますドームの脱落。

あなたが ng-containerタグドキュメントについて

<my-component> 
    <ng-container ngProjectAs="sub-header"> 
    Very 
    <strong>important</strong> text with tags. 
    </ng-container> 
    <ng-container ngProjectAs="sub-footer"> 
    More 
    <em>important</em> text with tags. 
    </ng-container> 
</my-component> 

Stackblitz Example

ngProjectAs角度属性を使用することができます

+0

が重複する可能性を見てみましょう[角度によって作成されたホストHTML要素セレクタを削除しますコンポーネント](https://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component) –

答えて

3
+0

それは非常にきれいに見えませんが、それは動作します!より良い解決策がない場合、私はこれを答えとして受け入れます! –

+0

これはどこに文書化されていますか? :D –

+0

@ Jota.Toledo追加: – yurzui

関連する問題