Come ottenere elementi interni originali per un componente: angolare, angolare2

Sto scrivendo un semplice componente "special-div" che potrebbe apparire come segue nel mio markup ...

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

Voglio catturare tutto dentro di mei componenti del componente e riutilizzare quegli elementi nel modello del mio componente. Diciamo che il mio componente diventa semplicemente un div con un po 'di testo del titolo ad esso .. nella sua forma più semplice lo farebbe ..

<special-div></special-div>

cederebbe ...

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

.. quello che non riesco a capire come fare è OTTENERE gli elementi originali in modo che possano apparire anche nel mio nuovo modello. Esempio ...

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

..diventare..

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

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

risposte:

1 per risposta № 1

Un modo per ottenere ciò che vuoi può essere fatto con qualcosa chiamato proiezione del contenuto (rinominato da transclusion come era noto in AngularJS).

Baiscally, è come se lasciassi un "buco" all'interno del modello che puoi riempire dall'esterno.

---

Il tuo SpecialDivComponent avrebbe un modello come il seguente.

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

Tu vorresti usa questo componente come questo.

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

Il risultato sarebbe il seguente markup.

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

---