• Angular2基础02:模板引用变量的使用


    模板引用变量

    需求:

    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,你可以在控制台中打印并查看

  • 相关阅读:
    Understanding Bootstrap Of Oracle Database
    Oracle Null 与 in, exists 的关系说明(not in 查不到结果)
    Oracle Virtual Box 安装使用 说明
    PowerDesigner 企业架构模型 ( EAM ) 说明
    excel 数据导入 mysql
    Go语言基础之内置函数
    Go语言基础之defer语句
    匿名函数和闭包
    Go语言基础之类型别名和自定义类型
    【Github】remote: Support for password authentication was removed
  • 原文地址:https://www.cnblogs.com/noper/p/6409746.html
Copyright © 2020-2023  润新知