Angular 2用户输入

用户点击链接、按下按钮或者输入文字时，这些用户的交互行为都会触发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 + '|';
   }
}