angular2用户输入的一些事件

按钮事件：

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);
}