Angular.io如何渲染@ContentChildren元素？

Question

我有以下组件：

@Component({
  selector: 'seed-layout',
  ...
})
export class LayoutComponent implements OnInit {
  @ContentChildren(HeaderEntryComponent, { descendants: true }) 
     menuEntries: HeaderEntryComponent[];
}

我想传递一些这样的组件：

<seed-layout>
  <seed-header-entry>1</seed-header-entry>
  <seed-header-entry>2</seed-header-entry>
  <seed-header-entry>3</seed-header-entry>
</seed-layout>

menuEntries正在填充，没关系。但是我应该如何在LayoutComponent中渲染它们呢？

Answer 1

您应该在LayoutComponent模板中使用ng-content，在那里必须呈现它们。

<ng-content></ngcontent>

您也可以使用ng-content的select="seed-header-entry"属性来指定差异中的内容以及此内容是否不同。