代码之家 › 专栏 › 技术社区 › gsamaras a Data Head

输入标记中的#id是什么意思?

hashtag input angular html

gsamaras a Data Head · 技术社区 · 7 年前

从这个角度来看。io tutorial ,我显示:

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

#searchBox

hashtag让我想起了用于id的jQuery选择器,但我不太确定这在这里意味着什么,因为我们已经有了一个id。

6 回复 | 直到 7 年前

nivas 7 年前

简单来说:

它被称为模板引用变量(也称为引用变量),因为它在模板中声明,并且经常在Javascript(typescript)中使用。
var id ( 但不完全相同
#somename 或 ref-somename

那么,我该如何使用这些TRV(模板引用变量),这是您应该研究的问题 library documentation

Szabolcs 5 年前

这是一个模板引用变量。更多详细信息请参见: https://angular.io/guide/template-syntax#template-reference-variables-var

Zze 7 年前

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

组成部分html

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

组成部分输电系统

@ViewChild('searchBox') input; 

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

Carsten 7 年前

#searchBox 如果您在typescript中定义输入元素,则它将为您提供对输入元素的引用,如:

@ViewChild('searchBox') searchBox;

this.searchBox.nativeElement.focus();

HD.. 7 年前

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

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

看看代码片段,#myColor是一个模板引用变量。myColor可以访问选择框的选定值。价值

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

:它允许将角度表达式绑定到表单的onsubmit事件。在这里,将调用表单submitpersonform组件方法submitpersonform。

:它是form指令的可嵌套别名

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

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

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

可移动的占位符 :如果我们已指定,它将提供文本框的占位符。

可移动的价值

可移动的类型 :它将给出输入元素的类型。在我们的示例中,类型是text。

Ajinkya Dhote 7 年前

这是模板参考变量它们通常被声明为#变量,可以在模板中的任何位置使用。

在这个特定场景中,searchBox是声明变量,该变量将存储在textbox中输入的任何内容的值。

此外,您还可以在keyup函数中看到此模板变量#searchBox的使用,如果它用于读取值本身。同样,您可以在代码中的任何地方使用这个变量。