角度模板变量引用

Question

这是Angular中一个奇怪的问题：

<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>

如果您在<input>中输入内容，则<p>的内容不会改变，这意味着pin1.value没有价值，这是否意味着变量引用#pin1不行吗？

另一方面，如果我们添加一个函数来传递引用，它将起作用。

<input #pin2 type="password" (input)="test(pin2)">
<p>You entered: {{pin2.value}}</p>

其中test=function(x){console.log(x);}

对于这个<input>，如果我们输入内容，<p>的内容将更改为相应的文字，这意味着#pin2有效。

所以，问题是，在Angular中，为什么我们必须首先使用函数来传递变量引用然后我们才能使用它，为什么我们不能直接使用变量引用。

Answer 1

首先，这不是具有约束力的方式。 你所做的是创建一个输入Dom对象的引用。在创建时，该Dom元素（输入）的值为空。因此，<p>标记中没有显示任何值。 如果你想在键入时看到值，那么你正在寻找像这样的双向绑定

<input [(ngModel)]="pin" type="password">
<p>You entered: {{pin}}</p>

假设在ts文件中声明了引脚。

关于为什么在引入函数时值正在更新，答案是因为只要你在输入中输入一些内容，Angular将调用该函数测试（pin2），这会导致在模型上运行检测更改。

长话短说，Angular是一个模型驱动的框架，如果你需要一个值，你不应该让DOM元素从那里获得价值。

Answer 2

我可能会得到一个含糊不清的答案，它可能与事件绑定有关，这意味着“视图到源”，如果我们没有绑定任何事件，那么视图（用户交互）就无法将数据传递给源（组件类），所以变量引用可能不起作用，但仍然存在一些问题，比如模板引用不应该与源端相关，因为这些变量不是组件类的成员/属性。

Answer 3

它是如此令人讨厌的行为 该代码不起作用

<input #inputval type="text"  />
<app-newcomp [testValue]="inputva.value"></app-newcomp>

但是如果您在输入元素中添加“ input”事件，那么它将起作用

<input #inputval type="text" (input)="someFunctionInTs($event)"  />
<app-newcomp [testValue]="inputva.value"></app-newcomp>