SuperAPI AI 工具集

angular-viewchild

前端与建站

查看项目

更新于 10-16 07:24

技能介绍

用途:该技能面向 Angular 21(2025),用于在 Angular 中访问 DOM 元素、模板引用与子组件/投影内容,核心涉及 ViewChild、ContentChild、ViewChildren。

主要能力:@ViewChild 获取元素引用或组件实例;通过 static 选项区分生命周期可用时机(static: true 在 ngOnInit 可用,static: false 在 ngAfterViewInit 可用);@ContentChild 读取 ng-content 投影内容,如 TemplateRef;@ViewChildren 配合 QueryList 处理多个元素并遍历;read 选项可指定读取 ViewContainerRef、TemplateRef 等;可直接调用子组件实例方法;可与 signal/effect 配合在条件满足时聚焦元素。

使用方式:在组件类中通过 @ViewChild('input') inputEl!: ElementRef<HTMLInputElement> 等方式声明查询,并在 ngAfterViewInit 中访问 nativeElement;投影内容用 @ContentChild(TemplateRef);多元素用 @ViewChildren('item') items!: QueryList<ElementRef>;需要特定类型时加 read 选项。

适用场景:需要在视图初始化后操作 DOM(如聚焦输入框)、调用子组件方法、读取投影模板、批量处理同选择器元素等。

限制:资料未提供安装命令、版本兼容细节或完整 API 说明,未提及收费与平台信息。