模板引用变量
需求:
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,你可以在控制台中打印并查看