,可以通过以下步骤实现:
@ViewChild('templateRef', { read: ViewContainerRef }) templateRef: ViewContainerRef;
这里假设NgTemplate的引用名称为"templateRef",你可以根据实际情况进行修改。
ngAfterViewInit() {
const componentRefs = this.templateRef['_embeddedViews'][0]['rootNodes'][0]['componentView']['component']['_view']['component'];
const childComponents = componentRefs._embeddedViews[0].rootNodes[0].children;
const childComponentWidths = childComponents.map((component: any) => {
return component.nativeElement.offsetWidth;
});
console.log(childComponentWidths);
}
这段代码中,我们首先获取到NgTemplate中的根组件的引用,然后通过该引用获取到所有子组件的引用。最后,使用nativeElement.offsetWidth属性获取子组件的宽度,并将宽度存储在一个数组中。
需要注意的是,以上代码仅适用于Angular框架,并假设NgTemplate中只包含一个根组件。如果NgTemplate中包含多个根组件,你可能需要进行适当的修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云容器服务(TKE)。腾讯云云服务器提供可靠的计算能力,适用于各种应用场景。腾讯云容器服务提供高度可扩展的容器化应用部署和管理平台,方便快捷地部署和管理容器化应用。
腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm 腾讯云容器服务产品介绍链接地址:https://cloud.tencent.com/product/tke
领取专属 10元无门槛券
手把手带您无忧上云