Question

从这个Angular.io tutorial，我展示：

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

我不理解这一点：#searchBox。有人可以解释一下吗？

标签让我想起了ids的jQuery选择器，但我不太清楚这意味着什么，因为我们已经有了id。

Answer 1

这是一个模板引用变量。详情请见https://angular.io/guide/template-syntax#ref-vars

Answer 2

简单来说：

它被称为模板引用变量（又称引用变量），因为它在模板中声明并且经常在Javascript（typescript）中使用。
模板引用变量类似于var id（但不完全相同），可用于引用几乎任何DOM元素（HTML元素，指令，组件）模板。
模板引用变量也可在Reactjs中使用。
在角度中，您可以使用#somename或ref-somename来声明模板引用变量。

那么我该如何使用这些TRV（模板参考变量），当你应该研究library documentation时

Answer 3

它用作组件中的元素选择器......

<强> component.html

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" value='4'/>

<强> component.ts

@ViewChild('searchBox') input; 

ngAfterViewInit() {
  console.log(input.nativeElement); // logs the javascript object for the element.
  console.log(this.input.nativeElement.value); // logs 4
}

Answer 4

模板引用用于为控件类提供对元素的引用。 #searchBox如果您在typescript中定义它，则会为您提供对input元素的引用，如：

@ViewChild('searchBox') searchBox;

现在您可以使用该引用来控制或询问您的输入元素，如：

this.searchBox.nativeElement.focus();

Answer 5

这是模板参考变量它们通常被声明为#variable，可以在模板中的任何地方使用。

在这个特殊场景中，＃searchBox声明了一个变量，它将存储在文本框中输入的内容的值。

此外你还可以看到在keyup函数中使用这个模板变量#searchBox它是用来读取值本身的。同样，您可以在代码中的任何位置使用此变量。

Answer 6

使用选择框的模板参考变量

<select #myColor (change) = "setData(myColor.value)"></select>

查看代码片段，＃myColor是模板引用变量。 myColor.value

可以访问选择框的选定值

带有NgForm的模板引用变量

如何使用模板引用变量

访问NgForm指令

<form (ngSubmit)="onSubmitPersonForm(myForm)" #myForm="ngForm">
    <input name="name" required [(ngModel)]="person.pname">
    <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>

ngSubmit ：它可以将角度表达式绑定到表单的onsubmit事件。这里在表单上提交onSubmitPersonForm组件方法将被调用。

ngForm ：它是表单指令

的可嵌套别名

这里我们使用ngForm的模板引用变量作为#myForm =＆＃34; ngForm＆＃34; 。现在我们可以使用myForm代替ngForm，例如检查表单有效性，我们也可以在我们的角度中使用它

使用输入文本框的模板引用变量

模板引用变量是一个变量，我们可以使用它来访问DOM属性。在我们的示例中，我们使用输入框的以下DOM属性。

<input type="text" #mobile placeholder="Enter Mobile Number">

在上面的输入文本框中，＃mobile是模板引用变量。要获取DOM属性，我们执行以下操作。

mobile.placeholder ：如果我们已指定，它将为我们的文本框提供占位符。

mobile.value ：它会给出我们文本框的值。

mobile.type ：它将提供输入元素的类型。在我们的示例中，类型是文本。

输入标签中的#id是什么意思？

6 个答案: