angular2用户输入的一些事件

来源：互联网发布：动感新时代淘宝编辑：程序博客网时间：2024/06/05 22:56

按钮事件：

html:

<button (click)="oncllick()">点我啊{{click1}}</button>

component:

click1:string;

oncllick(){  console.log("进来了")  this.click1="123";}
键盘事件：

html:
<input (keyup)="onKey($event)"><p>{{values}}</p>

component:

values="";onKey(event:any){  this.values += event.target.value+'|';}
---强类型

html:  <input (keyup)="key($event)" />  <p>{{values}}</p>component:

key(event :KeyboardEvent){  this.values += (<HTMLInputElement>event.target).value+'|';}
模板引用变量：

html:<input #box (keyup)="on(box.value)"><p>{{values}}</p>component:

on(value:string){  this.values+=value+"|";}

监听过滤，只反应回车

html:<input #box1 (keyup.enter)="values=box1.value"/><p>{{values}}</p>焦点事件！失去焦点

html:<input #box2 (blur)="values=box2.value"/><p>{{values}}</p>整合小例子：

html:<input #box3 (keyup.enter)="addHeros(box3.value)"              (blur)="addHeros(box3.value)"/><button (click)="addHeros(box3.value)">add</button><ul>  <li *ngFor="let hero1 of heros2">    {{hero1}}  </li></ul>

component:

heros2=["蜘蛛侠","蝙蝠侠","超人","美国队长"];addHeros(values:string){  if(null !=values)  this.heros2.push(values);}

0 0