Angular 在组件模板中呈现动态标记

如果我有

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

@组件({
选择器：“小部件”，
模板：`
`
})

现在我想这样使用这个组件

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

福
酒吧

有没有办法在angular 2中实现这一点？

添加

@组件({
选择器：“小部件”，
模板：`
`
})

让通过的孩子投射到那个位置

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