模板引用变量

需求：

1、当用户在组件AppComponent(举例)的input 框输入时要求在页面上同步显示用户输入值。
2、将用户输入的值传递到事件中，被获取进行一系列操作。

 

第一种方法：DOM 事件携带
DOM 事件携带可能对组件有用的信息，所有标准 DOM 事件对象都有一个

target

属性， 引用触发该事件的元素

在事件中传递$event事件对象，然后通过 $event.target.value可以获取该值。

类型化事件对象揭露了重要的一点，即反对把整个 DOM 事件传到方法中，因为这样组件会知道太多模板的信息。

所以该方法不是最好的方法。

 

 

第二种方法：模板引用变量

为什么它叫：模板引用'变量，顾名思义就是引用模板。既然是引用变量，那么他应用了谁？这些变量提供了从模块中直接访问元素的能力，在标识符前加上井号 (#) 就能声明一个模板引用变量。

优点：这个模板完全是完全自包含的。它没有绑定到组件，组件也没做任何事情。这里的自包含的意思是：它不用与Component进行交互。

 

 何时更新绑定

你可能会思考？ 既然他不用与Component进行交互，岂不是 (keyup)="doSomething" 这个绑定表达式也可以省略，答案是错误的！

原因：只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）

本例代码将

keyup

事件绑定到了数字0，这是可能是最短的模板语句。 虽然这个语句不做什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

看看 AppComponent里面什么也不写，也能完成交互效果。

 

模板中（template or templateUrl）this 的指向问题？

模板中this指向，他所属的component类，本例中的this 指向 Appcomponent，你可以在控制台中打印并查看