我可以强制 HTML 元素的 Angular #variableName 返回 ElementRef 吗？

Question

如果我创建一个这样的按钮：

<button #myButton>My Button</button>

...并像这样使用ViewChild：

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

...那么createButton 是（如声明的）ElementRef，其中createButton.nativeElement 是一个 DOM 元素。

但是，如果我这样做：

<button mat-raised-button #myButton>My Button</button>

...我的变量不再是 ElementRef，而是 MatButton 实例。

我真的希望变量保持为ElementRef。我该怎么做？

我见过像<form #myForm="ngForm"... 这样的符号，它确保变量是NgForm，或者<input #firstName="ngModel"...> 得到NgModel。

我尝试了<button #myButton="elementRef" mat-raised-button...，以及该主题的一些不同变体，但它们都产生了编译错误。有没有类似的东西可以解决问题？

这是 Angular 的一个非常缺乏文档记录的方面。我什至找不到这些参考/变量的正确术语。哈希参考？哈希变量？赫伯特?我知道#firstName="ngModel" 之类的唯一原因是通过查看示例，而不是通过说明一般概念的文档。

Answer 1

要指定要查询的令牌，可以使用 ViewChild#read 参数，如 Angular 文档中所述：

read - 用于从查询的元素中读取不同的标记。

示例：

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

Check the demo

---

这是 Angular 的一个非常缺乏文档记录的方面。我什至找不到这些参考/变量的正确术语。哈希 参考？哈希变量？赫伯特?我知道的唯一原因 #firstName="ngModel" 之类的内容来自查看示例，而不是来自 阐明一般概念的文档。

关于这个，有一个专门的部分，你可以查看here。

Answer 2

鉴于问题，@developer033 的回答是正确的。但是，当想要直接在模板中使用模板引用变量而不是通过@ViewChild 时，可能会提出相同的问题。为了完整起见，我将在此处提供答案。

简短的回答：不，你不能。但是我们可以通过编写我们自己的指令作为代理来使其工作：

@Directive({
  selector: "[injectRef]",
  exportAs: "elementRef",
})
export class InjectRefDirective extends ElementRef<unknown> {
  constructor(elementRef: ElementRef<unknown>) {
    super(elementRef.nativeElement);
  }
}

然后用 as

<button injectRef #myRef="elementRef"></button>