Angular学习笔记29:事件绑定

小编 2026-06-25 阅读:1559 评论:0
事件绑定     前面的绑定都是按照 : 元素到组件的方式     但是在一个页面不可能只是数据展示给用户,而用户对页面没有任何操作,不能进行和页面的交互操作,在与用的交互操作时,怎么才能知道用户进行了怎...

事件绑定
  

 前面的绑定都是按照 : 元素到组件的方式
    但是在一个页面不可能只是数据展示给用户,而用户对页面没有任何操作,不能进行和页面的交互操作,在与用的交互操作时,怎么才能知道用户进行了怎么样的操作和交互呢?
    这个时候,就用到了各种事件,如按下键盘某一个按键,点击了某一鼠标和触摸屏。Angular中可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣。
    事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。

    例如:在一个button上绑定一个点击事件:

<button (click)=\"onSave()\">Save</button>

    在这里button的标签中,
        1.在等号(=)左边的是把按钮的点击事件作为绑定的目标,在工作用,有些会加上on-的前缀,这样使整个代码更规范。

<button on-click=\"onSave()\">On Save</button>


    元素事件可能是更常见的目标,但 Angular 会先看这个名字是否能匹配上已知指令的事件属性,就像下面这个例子:
    

<div (myClick)=\"clickMessage=$event\" clickable>click with myClick</div>


    当如果这个指令没有被Angular找到,Angular就会报错,提示有未知的指令的错误。

        2.在等号(=)右边的是事件绑定的事件的具体方法,这个具体的方法是写在类文件(TS文件)中的,点击这个事件所进行的操作和处理的逻辑在这个方法中实现,在这个,此时就形成了,当用户点击某个按钮或者某个页面中的元素的时候,就会进行相应的交互。


$event 和事件处理语句

在事件绑定中,Angular 会为目标事件设置事件处理器。

    当事件发生时,这个处理器会执行模板语句。 典型的模板语句通常涉及到响应事件执行动作的接收器,例如从 HTML 控件中取得值,并存入模型。
    绑定会通过名叫 $event 的事件对象传递关于此事件的信息(包括数据值)。
    事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件, $event 就是 DOM 事件对象,它有像 target 和 target.value 这样的属性。
    例如:

<input [value]=\"currentHero.name\"
       (input)=\"currentHero.name=$event.target.value\" >

    通过上面的代码,是将输入框的value属性绑定到了name属性上,要监听对input这个控件值的修改,代码绑定到输入框的input事件。当用户对控件造成更改的时候,input的事件就会被触发,并在包含DOM事件对象($event)的上下文中执行这条语句。需要更新name属性,就要通过路径 $event.target.value来获取更改后的值,如果事件属于指令,那么$event具体是什么,就由具体的指令去决定了。使用 EventEmitter 实现自定义事件
    通常情况下,Angular可以使用EventEmitter来触发自定义的事件,这个通常用在父组件和子组件传输值的时候会用到。指令创建一个 EventEmitter 的实例,并且把它作为属性暴露出来,指令调用EventEmitter的emit(需要传入的值或者任何东西)方法,来触发事件,这个时候可以穿入任何东西,作为事件触发的载荷。父组件的指令绑定到这个属性来监听事件,并通过$event对象来访问前面EventEmitter的emit方法中传入的值或者任何东西。

定一个EventEmitter

testEvent = new EventEmitter<any>();

向自定义EventEmitter中传入(值或者任何东西)

this.testEvent.emit(值/任何东西);

在模版中,通过$event去获取testEvent中存在的值或者任何东西

(testEvent)=\"getEvent($event)\"

在类文件中:

getEvent(event){
    console.log(event);  // 此时的event就是在EventEmitter中寸的值或者任何东西
}

 

版权声明

本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。

热门文章
  • 机房智能化温湿度解决方式之POE供电以太网温湿度传感器

    机房智能化温湿度解决方式之POE供电以太网温湿度传感器
    机房智能化温湿度解决方式之POE供电以太网温湿度传感器 北京盈创力和电子科技有限公司 智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家,北京盈创力和 北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块,利用它可以实现现场温度值、相对湿度值的采集,同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。 工作于-40℃~85℃工业级带...
  • Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering

    Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
    Problem Statement 我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model):对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt​,t∈N},我们认为每个观测结果yty_tyt​的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt​∈{xt​,t∈N},即:p(...
  • HTTP状态保持的原理

    HTTP状态保持的原理
    a)在用户登录之后,浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候,浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录  Http是无状态的,就是连接时数据互通,关闭后...
  • Hive 系统函数及示例

    Hive 系统函数及示例
    查看所有系统函数 show functions; 函数分类 内置函数【系统函数】 数学函数: floor、round、ceil、cos、log2等 字符串函数: length、reverse、trim、lower、get_json_object、repeat等 收集函数: size 转换函数: cast 日期函数: year、month、datediff、date、date_add等 条件函数: coalesce、case…w...
  • CSRF的原理和防范措施

    CSRF的原理和防范措施
    a)攻击原理:i.用户C访问正常网站A时进行登录,浏览器保存A的cookieii.用户C再访问攻击网站B,网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交,传指定的参数iii.而攻击网站B在访问网站A的时候,浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态,所以...
标签列表