ref参数变量（Angular 2）

Question

我想了解模板引用变量表示法之间的区别，如下面输入文本框中所述。

<input type="text" name='name' #name [(ngModel)]='model'>
<input type="text" name='name' ref-name [(ngModel)]='model'>

使用 #name 和引用名称之间有什么区别。
使用ref-name变量的范围是否会发生变化？ 任何人都可以建议最佳做法和理由吗？

Answer 1

它们是两种不同的语法，完全相同。

你可以这样想：有些人（和编辑）不喜欢新的＃变量＆＃39;语法，因此Angular提供了一个选项，可以使用更加可口的＆＃39;来使用完全相同的功能。语法。

Answer 2

Template reference variable is a variable using which we can access DOM properties.

使用模板引用变量，我们访问DOM元素属性的值。模板引用变量使用＃和ref-作为前缀声明，例如#item和ref-item。

示例：使用输入文本框

的模板引用变量

<input type="text" #name placeholder="Enter your name" />

此处#name是模板引用变量，用于获取我们遵循的DOM属性

name.placeholder它为我们的文本框提供了＆＃34;占位符＆＃34;如果我们已经指定。

name.value它给了我们＆＃34;价值＆＃34;我们的文本框。

name.type它会让我们＆＃34;输入＆＃34;我们的文本框。

这是我创建的例子。

HTML页面

输出

您可以使用 ref-name 参考变量执行相同操作。

Answer 3

模板引用变量是一个变量，我们可以使用它来访问DOM属性。引用变量引用它附加的元素，组件或指令。它可以在整个模板中的任何位置访问。

<input type="text" name='name' #name [(ngModel)]='model'>

#name声明元素上的名称变量。 引用＃...现在总是指ref-。 使用＃或* ngFor之外的ref。 您可以参考以下网址：http://www.concretepage.com/angular-2/angular-2-template-reference-variable-example