时间戳

首页 > 解决方案 > 我可以强制 HTML 元素的 Angular #variableName 返回 ElementRef 吗？

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

问题描述

如果我创建这样的按钮：

<button #myButton>My Button</button>

...并ViewChild像这样使用：

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

...然后createButton是（如声明的） an 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"是看例子，而不是从阐明一般概念的文档中。

标签： javascripthtmlangulartypescriptangular-material

解决方案

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

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

示例：

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

检查演示

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

关于这一点，您可以在此处查看专门的部分。

推荐阅读