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 += (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)">addbutton>
<ul>
  <li *ngFor="let hero1 of heros2">
    {{hero1}}
  li>
ul>

component:

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