Question

我想在Angular2中制作一个可以渲染多个子模板的组件，例如

<div id="header">
  <!-- header template here -->
</div>
<div id="content">
  <!-- content template here -->
</div>
<div id="footer">
  <!-- footer template here -->
</div>

我可以将渲染的html映射到任何div，例如使用标头的[innerHtml]映射到输入属性，例如

<my-container [headerText]="<b>HEADER</b>"></my-container>

但我希望该组件不仅能够接收预处理的html，还能接收其他angular2模板作为数据，例如：

<my-container 
    [headerText]="<other-component [input]>='value'</other-component>">
</my-container>

有没有理智的方法来做到这一点？

Answer 1

通常使用ng-content

执行此操作

@Component({
  selector: 'my-container',
  template: `
    <ng-content></ng-content>
  `
})

然后在标记中使用它。

<my-container>
  <div id="header">
    <!-- header template here -->
  </div>
  <div id="content">
    <!-- content template here -->
  </div>
  <div id="footer">
    <!-- footer template here -->
  </div>
</my-container>

如果您想要多个占位符，则可以将它们命名为

@Component({
  selector: 'my-container',
  template: `
    <ng-content select="my-header"></ng-content>
    <ng-content select="my-content"></ng-content>
    <ng-content select="my-footer"></ng-content>
  `
})

并使用像

这样的标记

<my-container>
  <my-header>
    <!-- header template here -->
  </my-header>
  <my-content>
    <!-- content template here -->
  </my-content>
  <my-footer>
    <!-- footer template here -->
  </my-footer>
</my-container>

组件中的多个子模板

1 个答案: