Angular学习笔记29:事件绑定

事件绑定
  

 前面的绑定都是按照 : 元素到组件的方式
    但是在一个页面不可能只是数据展示给用户,而用户对页面没有任何操作,不能进行和页面的交互操作,在与用的交互操作时,怎么才能知道用户进行了怎么样的操作和交互呢?
    这个时候,就用到了各种事件,如按下键盘某一个按键,点击了某一鼠标和触摸屏。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中寸的值或者任何东西
}

猜你喜欢

转载自blog.csdn.net/wjyyhhxit/article/details/84842569