Angular2でレンダリングする前にng-contentを取得する方法

Question

コンポーネントのselectorタグの中に書かれたhtmlコードをそのまま（ブラウザにレンダリングする前に）取得する必要があります。たとえば、私は、文字列としてタグ内に記述されたHTMLコードを必要とする子コンポーネントでは、私のコンポーネントは、親と子です

子で

、親で

@Component({ 
    selector: 'child', 
    template: '<ng-content></ng-content>' 
}) 
... 

、

@Component({ 
    selector: 'parent', 
    template: ` 
     <child> 
      <p>Title 1</p> 
      <some-other-component [input]="1"></some-other-component> 
     </child> 


     <child> 
      <p>Title 2</p> 
      <some-other-component [input]="2"></some-other-component> 
     </child> 
    ` 
}) 
... 

を前提としています。上記のシナリオでは、"<p>Title 1</p> <some-other-component [input]="1"></some-other-component>"と"<p>Title 2</p> <some-other-component [input]="2"></some-other-component>"が必要です。

P.S.ここでの目的は、コードスニペットページを作成することです.HTMLコードスニペットをng-contentとして渡してプレビューとコードサンプルの両方をレンダリングすることができます。

Answer 1

コンテンツパートに一意のクラスを追加し、次のコンポーネント設定を使用して選択することができます。ここでのセレクタは、任意の有効なquerySelector FNセレクタは、だからあなたのコンテンツがこの

<child class="fisrt"> 
     <p>Title 1</p> 
     <some-other-component [input]="1"></some-other-component> 
    </child> 


    <child class="second"> 
     <p>Title 2</p> 
     <some-other-component [input]="2"></some-other-component> 
    </child> 

ようにすることができ

<ng-content select=".first"> 

と

<ng-content select=".second"> 

です