Render dynamische Markup in Komponentenvorlage

Question

Angenommen, ich habe

@Component({ 
    selector: "widget", 
    template: ` 
<div class="container"> 
<div class="header"></div> 
<!--body--> 
<div class="footer"></div> 
</div>` 
}) 

Nun möchte Ich mag diese Komponente verwenden, wie dies

<widget> 
<!-- h3 and p will be rendered between header and footer divs--> 
<h3>foo</h3> 
<p>bar</p> 
</widget> 

Gibt es eine Möglichkeit, dass in Winkel 2 zu erreichen?

Answer 1

hinzufügen <ng-content></ng-content>

@Component({ 
    selector: "widget", 
    template: ` 
<div class="container"> 
<div class="header"></div> 
<ng-content></ng-content> 
<div class="footer"></div> 
</div>` 
}) 

die übergebenen Kinder in diese Position projiziert zu bekommen.