如何强制Angular模板#变量引用元素时返回ElementRef而非组件实例

核心解决方案 #

在@ViewChild查询配置中添加read: ElementRef参数即可强制指定返回类型为ElementRef，不受元素上挂载的其他指令/组件影响：

@ViewChild('myButton', { static: true, read: ElementRef }) createButton: ElementRef;

相关原理说明 #

1. 你提到的#xxx形式的标识官方术语为模板引用变量。
2. 默认情况下，Angular对模板引用变量的@ViewChild查询优先级规则为：优先返回元素上挂载的组件/指令实例，不存在匹配的组件/指令时才回退返回ElementRef实例。你给按钮加了mat-raised-button属性（对应Angular Material的MatButton指令），所以默认查询会返回MatButton实例。
3. 你尝试的#myButton="elementRef"写法报错是因为：只有声明了exportAs元数据的组件/指令才能使用#变量名="导出名"的语法。比如NgForm的exportAs为ngForm、NgModel的exportAs为ngModel，而ElementRef是Angular对DOM元素的内置包装类，没有设置exportAs配置，因此无法通过模板变量直接赋值的方式获取。

如果需要在模板中直接操作DOM元素，直接使用模板引用变量即可，模板上下文中的引用变量对应原生DOM节点，不需要额外包装为ElementRef。

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