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

Question

从这个Angular.iotutorial，我显示：

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

我不明白的地方：#searchBox。有人可以解释一下吗？

主题标签让我想起了 ID 的 jQuery 选择器，但我不太确定这在这里意味着什么，因为我们已经有了一个 ID。

Answer 1

这是一个模板引用变量。在此处查看更多详细信息：https://angular.io/guide/template-syntax#template-reference-variables-var

Answer 2

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

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 3

模板引用用于为您的控件提供 class 对元素的引用。 #searchBox 如果您在打字稿中定义它，则会为您提供对输入元素的引用：

@ViewChild('searchBox') searchBox;

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

this.searchBox.nativeElement.focus();

Answer 4

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

在此特定场景中，#searchBox 声明了一个变量，该变量将存储在文本框中输入的任何内容的值。

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

Answer 5

使用 Select 框的模板引用变量

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

看代码片段，#myColor是一个模板引用变量。 select 框的 selected 值可以通过 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：它可以将 angular 表达式绑定到表单的 onsubmit 事件。这里将调用表单提交的 onSubmitPersonForm 组件方法。

ngForm: 表单指令的可嵌套别名

这里我们使用 ngForm 的模板引用变量作为 #myForm="ngForm" 。现在我们可以使用 myForm 代替 ngForm 来检查表单有效性，我们也可以在 angular

中使用它

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

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

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

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

mobile.placeholder：如果我们指定了，它会给出我们文本框的占位符。

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

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

Answer 6

简单来说：

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

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

的时候

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

What does #id in input tag mean?

html

input

hashtag

angular