用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发Dom事件。
1.绑定到用户输入事件
我们可以使用Angular事件绑定机制来响应任何DOM事件。
以下实例绑定了点击事件:
<button (click)="onClickMe()">点我!</button>
等号左边的(click)表示把该按钮的点击事件作为绑定目标。等号右边,引号中的文本是一个模板语句。
完整代码如下:
import { Component } from 'angular/core';
@Component({
selector:'click-me',
template:`
<button (click)="onClickMe()">点我!</button>
{{clickMessage}}`
})
export class ClickMeCompponent {
clickMessage = '';
onClickMe(){
this. clickMessage = '菜鸟教程';
}
}
通过$event对象取得用户输入
我们可以绑定到所有类型的事件。
试试绑定到一个输入框的keyup事件,并且把用户输入的东西回显到屏幕上。
@Component({
selector:'key-up1',
template:`
<input (keyup)="onKey($event)">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v1{
values = '';
/**
*非强类型
*/
onKey(event:any){
this.values += event.target.value + '|';
}
/**
*强类型
*/
onKey(event:keyboardEvent){
this.values += (<HTMLInputElement>event.target).value + '|';
}
}
以上代码中我们监听了一个事件并捕捉用户输入,Angular把事件对象存入$event变量中。
组件的onKey()方法是用来从事件对象中提取出用户输入的,再将输入的值累加到values的属性。
从一个模板引用变量中获得用户输入
可以通过使用局部模板变量来显示用户数据,模板引用变量通过在标识符前加上#来实现。如以下实例:
@Component({
selector:'loop-back',
template:`
<input #box (keyup)="0">
<p>{{box.value}}</p>
`
})
export class LoopbackComponent{}
我们在<input>元素上定义了一个名叫box的模板引用变量。box变量引用的就是<input>元素本身,这意味着我们可以获得input元素的value值,并通过插值表达式把它显示在<p>标签中。
我们可以使用模板引用变量来修改以上keyup的实例:
@Component({
selector:'key-up2',
template:`
<input #box (keyup)="onKey(box.value)">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v2{
values = '';
onKey(value : string){
this.values += value + '|';
}
}