Question

我有以下代码段

<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>

我想访问所有tab-heading，所以我正在使用@ContentChildren装饰器

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

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

但是这将返回空列表。是否可以使用@ContentChildren或其他方法获得相同的结果？

这里是TabHeading类

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

即使我尝试使用ngAfterContentInit挂钩仍无法正常工作。

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

我可以得到my-tab。但无法获得嵌套的孩子。

Answer 1

TabHeading是我的自定义角度分量，我没有将其注册到ngmodule中。

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

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

1 个答案: