如何獲得原有的內部元素的成分

Question

我寫一個簡單的組件「特殊格」，可能看起來像我的標記下面......

<special-div> 
    <img src="logo.jpg" /> 
    <div>This is some random markup</div> 
    <p>Anything could be inside the special div</p> 
</special-div> 

我想捕捉在心裏我組件的標籤並在組件的模板中重用這些元素。比方說，我的分量變得簡單一些標題文本給它一個div ..它是最基本的，將做到這一點..

<special-div></special-div> 

會產生...

<div> 
    <p>I am a special div</p> 
</div> 

..什麼我無法弄清楚如何做是GET原始元素，以便他們也可以出現在我的新模板。例如...

<special-div> 
    <img src="logo.jpg" /> 
    <div>This is some random markup</div> 
    <p>Anything could be inside the special div</p> 
</special-div> 

..become ..

<div> 
    <p>I am a special div</p> 

    <img src="logo.jpg" /> 
    <div>This is some random markup</div> 
    <p>Anything could be inside the special div</p> 
</div> 

Answer 1

達到你想要可以利用所謂的內容投影（從transclusion改名完成，因爲它被稱爲什麼辦法在AngularJS中）。

保險業，就像你在模板裏留下一個「洞」，你可以從外面填寫。

---

你SpecialDivComponent將有一個模板如以下。

<p>I'm special because I always have this tag!</p> 
<ng-content></ng-content> 

你會使用該組件這樣。

<special-div> 
    <p>Hello there!</p> 
    <b>Nice to meet ya!</b> 
</special-div> 

的結果將下面的標記。

<special-div> 
    <p>I'm special because I always have this tag!</p> 
    <p>Hello there!</p> 
    <b>Nice to meet ya!</b> 
</special-div>