Angular2：得到子组件的数量 - 在生命周期中以及如何

Question

因此，为了便于说明，我可以说我有两个组件

• 标签集
  • TabItem的

其中tabset是具有许多tabitems的父级

• 标签集
  • tabitem1
  • tabitem2
  • tabitem3
  • 等...

所以，根据tabset里面有多少个tabitems，我会计算一些东西......

那么，我该如何计算项目数？

（项目计数应该可以在子组件中访问）...

所以我像这样引用了父母

<tabset #tabset>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
</tabset>

那我怎么离开这里？ 在tabset的生命周期中，我会知道实际上有多少元素？我是否需要使用带有 ElementRef 和 getElementsByTagName 的vanilla javascript？或者还有其他更有棱角的友好方式吗？

一个额外的问题......我如何通过 ng-content 传递组件的参考？

tabset.html

<div class="...." #tabset>
    <ng-content></ng-content>

Answer 1

@ContentChildren(TabItem) tabItems:QueryList<TabItem>;

ngAfterContentInit() {
  console.log(this.tabItems.toArray().length);
}