我可以强制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;

检查演示

---

这是Angular中文档很少的一个方面。我甚至找不到合适的术语来描述这些类型的引用/变量。哈希参考?散列变量?赫伯特?我所知道的唯一原因是比如#firstName="ngModel"是看例子，而不是说明一般概念的文档。

关于这个，有一个专门的部分你可以在这里查看.

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>