如何在Angular组件类中获取模板内的DOM元素？

• 我的需求是在组件内部获取元素的bounding client rect，以此定位一个相对视口的上下文菜单容器。
• Angular提供@ViewChild('hashedId') someVar!: T;语法来获取元素，但入门文档并未直接说明它返回的是ElementRef，仅在API文档中提及——而且文档里用了“选择器”一词，曾让我误以为是CSS选择器。
• 这种写法能生效，是因为ElementRef包含nativeElement属性，这个属性才是实际的DOM元素。这里的hashedId就是API中所说的“选择器”，对应模板里的标记：

<tag #hashedId/>

• 我的场景里，模板中的hashedId对应的实际是HTMLDivElement（属于Element的一种），于是我写下了这段代码：

@ViewChild('containerElement')
private containerElement!: Element;

// ...

ngAfterViewInit(): void {
  console.log(this.containerElement);
}

• 这段代码在IDE里没有编译错误，但控制台输出的结果却是ElementRef。我知道TypeScript并非完全类型健全的语言，最终会转换为无类型的JavaScript，但原本以为Angular的构建系统会自动修正这个类型不匹配的问题。
• 正确的写法应该是：

@ViewChild('containerElement')
private containerElement!: ElementRef;

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