如何在Angular2中渲染之前獲取ng-content

Question

我需要將渲染到瀏覽器之前寫入到組件選擇器標籤內的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> 
    ` 
}) 
... 

在子組件，我需要內標籤作爲字符串寫入HTML代碼。即在上述情況下，我需要"<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選擇

<ng-content select=".first"> 

和

<ng-content select=".second"> 

所以你的內容可以是這樣的

<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>