浅谈Angular2.0下的用户输入

我们知道用户输入会触发DOM事件，我们一般通过事件绑定来监听它们，将更新到得数据导入进我们的组件和model。

直接看例子：

   用事件绑定实现点击事件处理器。

   <button (click)="onclick()">Click Me!</button>

  {{clickMessage}}

  这是一段很简单的写在templeta里面的代码。等号左边(click）表示把该按钮的点击事件作为绑定目标。angular2.0里的鼠标事件都是采用此类方法的。

  等号右边是需要引进的模板语句，其实按正常理解就是方法名。我们通过调用onclick()这个方法来响应这个点击事件。

然后在component里面我们需要这样写：

     clickMessage='';

    onclick(){

           this.clickMessage='You are my hero';

   }

这个时候当用户点击按钮时，Angular调用组件的onclick方法。

还介绍第二种情况：通过$event对象获取到用户的输入。也就是当我们的键盘执行某些操作时能将值获取出来。

<input (keyup)="onKey($event)">

<p>{{values}}</p>

这是一段简单的键盘按下的代码。

values='';

onkey(event:any){

      this.values+=event.target.value+'|';

}

onkey(event:any)里表示value:type。也就是值：类型。

$event对象的属性都含有不同的类型。这是你如果不知道类型的时候，可以写any。知道如果是字符串就写string。

每一个标准的DOM事件对象都含有一个target属性，代表触发该事件的元素。本例中target是<input>元素对象。event.target .value返回当前元素的内容。

同样的还可以使用event.key;

this.values+=event.key+'|';

效果是这样的。

当然还有一种最简单的方式，从一个模板的引用变量中直接获取用户内容。

<input #b (keyup)="0">

<p>{{b.value}}</p>

这是一种采用模板引用变量的语法特性。可以让我们直接的访问元素。通过标示符#，定义一个模板引用变量。

记得前面说过angular中只有添加和移除。通过调试可以看出。

用这种方式获取的input元素完全没有用到组件。

并且和其他的是 一样的，只有用户做了某些操作，如点击，angular才更新绑定的数据，并最终显示在屏幕上。

并且每一个方法名和变量名都是唯一的。也就是此页面将不会允许出现两处#b。

按照这一种方式，我们就可以不采用$event来获取元素了。

<input #box (keyup)="onkey(box.value)">

<p>{{values}}</p>

values="";

onkey(valueB:string){

    this.values+=valueB+'|';

}

同样的你也可以绑定不同的事件，比如按回车才输入的事件

<input #box (keyup.enter)="onEnter(box.value)">

<p>{{value}}</p>

再比如失焦事件：

<input #box (keyup.enter)="update(box.value)" (blur)="update(box.value)">

<p>{{value}}</p>

value='';

update(value:string){

    this.value=value;

}

失焦或者键盘enter之后自动将数据显示。

再比如：

<input #box (keyup)=‘add(box.value)" (blur)="add(box.value);box.value=' '">

<ul>

  <li *ngFor="let value of valueC">{{value}}</li>

</ul>

组件中这样写：

    valueC=['a','b','c'];

   add(value:string){

      if(value){

        this.valueC.push(value);

}

}

首先会自动将valueC里面的三个值添加进去。然后再显示输入的值。

这里需要记住获取输入框的值并将其传递给组件的add，而不是value