如何使用Angle中的ContentChildren访问嵌套元素

Question

I have the following code snippet

<my-tabs>
   <my-tab>
       <tab-heading>Users</tab-heading>
       <tab-content>Users Data</tab-content>
   </my-tab>
   <my-tab my-tab--active>
       <tab-heading>Groups</tab-heading>
       <tab-content>Roles Data</tab-content>
   </my-tab>
</my-tabs>

I want to access all the tab-heading so I am using @ContentChildren decorator like this

@ContentChildren(TabHeading, { descendants: true })
    tabHeadingList: QueryList<TabHeading>;

ngAfterViewInit() {
   console.log(this.tabHeadingList);
}

but this returns the empty list. Is it possible to get the same using @ContentChildren or any other way around?

Here is TabHeading Class

@Component({
    selector: "tab-heading",
    template: `<li class="tab"><a href="#123456789"><ng-content></ng-content></a></li>`
})
export class TabHeading {
}

Even I tried with ngAfterContentInit hook still not working.

ngAfterContentInit() {
    console.log("Content Init");
    console.log(this.tabHeadingList);
}

I am able to get my-tab though. but not able to get the nested child.

Answer 1

TabHeading is my custom angular component, I was not registering it to ngmodule .

@NgModule({
    imports: [CommonModule],
    declarations: [MyTab, MyTabs, TabHeading],
    exports: [MyTab, MyTabs, TabHeading]
})
export class TabsModule { }