Angular 模板变量引用

Question

Here is a weird problem in Angular:

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

If you type something in <input> , the <p> 's content will not change which means pin1.value does not have value, does it mean the variable reference #pin1 does not work?

On the other hand, if we add a function to pass the reference, it will work.

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

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

For this <input> , if we type something, the the <p> 's content will change to corresponding text which implies #pin2 works.

So, the question is, in Angular, why we must use function to pass variable reference firstly then we can use it, why we cannot directly use variable reference.

Answer 1

Firstly, that is not how binding works. What you did is creating a reference to input Dom object. At the time of the creation, the value of that Dom element (input) was empty. hence no value showing in your <p> tag. if you want to see the value as you type then you are looking for a 2 way binding like so

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

Assuming that pin is declared in your ts file.

As to why the value was updating when you introduces a function, the answer is because Angular will be calling that function test(pin2) whenever you type something into that input which results in running a detect change on the model.

Long story short, Angular is a Model driven framework, if you need a value, you shouldn't need to get the DOM element to get the value from there.

Answer 2

我可能会得到一个模棱两可的答案，它可能与事件绑定有关，即“view-to-source”，如果我们没有绑定任何事件，则视图（用户交互）无法将数据传递给源（组件类） ，因此变量引用可能不起作用，但仍然存在一些问题，例如模板引用不应与源端相关，因为此类变量不是组件类的成员/属性。

Answer 3

it is so werired behaviour in angular this code not working

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

but if you add "input" event to the input element then it will work

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