在组件模板中渲染动态标记

Question

假设我有

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

有没有办法在角度2中实现这个目标？

Answer 1

添加<ng-content></ng-content>

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

让被传递的孩子投射到那个位置。