Angular 18中使用viewChild()信号获取组件HtmlElement实例遇TS错误求助

在Angular 18中使用viewChild()信号获取自定义组件SearchBarComponent的DOM元素实例时，编写如下代码：

searchBar = viewChild<SearchBarComponent>('searchBar', { read: ElementRef });

会触发TypeScript错误：“期望传入1个参数，但实际传入了2个。”

问题原因 #

Angular 18的viewChild()信号API相较于旧版装饰器做了简化，不再支持第二个参数的read配置项，相关类型指定需通过泛型完成。

解决代码 #

如果需要获取自定义组件对应的DOM元素ElementRef实例，直接通过泛型指定类型即可：

searchBarElement = viewChild<ElementRef<HTMLElement>>('searchBar');

若需同时获取组件实例和对应的DOM元素，可分别声明两个信号：

// 获取组件实例
searchBarComponent = viewChild<SearchBarComponent>('searchBar');
// 获取组件对应的DOM元素
searchBarElement = viewChild<ElementRef<HTMLElement>>('searchBar');

内容的提问来源于stack exchange，提问作者Schnitzler