Angular2：获取子组件的数量 - 在生命周期中的时间以及如何

Question

So, for illustration purposes lets say I have two components

• tabset
  • tabitem

where tabset is the parent that has many tabitems

• tabset
  • tabitem1
  • tabitem2
  • tabitem3
  • etc...

So, depending on how many tabitems there are inside tabset I will calculate some stuff...

so, how do I get the item count?

(the item count should be accessible in the child component)...

so I have reference of the parent like this

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

So how do I go from here? When in the life-cycle of tabset I will know how many elements there are actually in? and do I need to use vanilla javascript with ElementRef and getElementsByTagName ? Or is there any other, more angular friendly way?

One extra question.... how can I pass the component's reference via ng-content ?

tabset.html

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

Answer 1

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

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

Note: TabItem can be a component too, not only a directive