angular2应用用户输入

用户输入触发 DOM 事件。我们通过事件绑定来监听它们,把更新过的数据导入回我们的组件和 model 。
(1)绑定到用户输入事件

例子:建个app/click-me.component.ts文件
  @Component({
    selector: 'click-me',
    template: `
      <button (click)="onClickMe()">Click me!</button>
      {{clickMessage}}`
  })
  export class ClickMeComponent {
    clickMessage = '';      
    onClickMe() {
      this.clickMessage = 'You are my hero!';
    }
  }

等号左边为绑定的目标,右边为模板语句
写绑定时,我们必须知道模板语句的 执行上下文 。 出现在模板语句中的各个标识符,全都属于一个特定的上下文对象。 这个对象通常都是控制此模板的 Angular 组件。
selector:为自定义标签,文件必须在app.module中导入;
导入的有import { 文件的根模块 } from 文件路径;
<pre>@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,ClickMeComponent ],//每次新建最好都添加上
bootstrap: [ AppComponent,ClickMeComponent ]
})</pre>
还有在html中必须把标签涵盖进去;
(2)通过 $event 对象取得用户输入
我们可以绑定到所有类型的事件。让我们试试绑定到一个输入框的 keyup 事件,并且把用户输入的东西回显到屏幕上import { Component } from '@angular/core';

建个app/keyup.components.ts
      //模板
      template: `
      <input (keyup)="onKey($event)">
      <p>{{values}}</p>
    // without strong typing弱类型onKey事件    `
    export class KeyUpComponent_v1 {
    values = '';  
      onKey(event:any) {
        this.values += event.target.value + ' | ';
      }
    }
    // with strong typing强类型onKey事件
    export class KeyUpComponent_v1 {
      values = '';
      onKey(event: KeyboardEvent) {
       this.values += (<HTMLInputElement>event.target).value + ' | ';
      }
    }
    }

Angular 把事件对象存入 $event 变量中,也就是我们传到组件的 onKey() 方法中的那个。 我们希望取得的用户数据就在该变量中的某个地方。
$event 对象的形态取决于所触发的事件。 这个 keyup 事件来自 DOM ,所以 $event 必须是一个 标准的 DOM 事件对象 。 $event.target 给了我们一个 HTMLInputElement 对象,它有一个 value 属性,是用户所输入的数据。

使用强类型后,我们就能看出直接把 DOM 事件对象传到方法里的做法有一个严重的问题:过多模板细节,太少关注点分离。 ( 译注: onKey 不应该理会模板的实现细节,只接收传入字符串。需要强制转换类型是代码的坏味道。 )

keyup1-anim.gif
                                           #  `这个图形在输入框没有内容的时候在浏览器没有任何变化。`

(3)从一个模板引用变量中获得用户输入
还有另一种方式,不用通过 $event变量来获得用户数据。
Angular 有一个叫做 模板引用变量 的语法特性。 这些变量给了我们直接访问元素的能力。 通过在标识符前加上井号 (#) ,我们就能定义一个模板引用变量.
在一个超简单的模板中实现了一个聪明的按键反馈循环。如:

建个app/loop-back.component.ts
  @Component({
    selector: 'loop-back',
    template: `
      <input #box (keyup)="0">
      <p>{{box.value}}</p>
    `
  })
  export class LoopbackComponent { }

keyup-loop-back-anim.gif

(4)按键事件过滤 (通过 key.enter)
过滤按键,比如每一个 $event.keyCode ,并且只有当这个按键是回车键的时候才更新 values 属性。

修改app/keyup.components.ts 文件
  @Component({
    selector: 'key-up3',
    template: `
      <input #box (keyup.enter)="values=box.value">
      <p>{{values}}</p>
    `
  })
  export class KeyUpComponent_v3 {
    values = '';
  }

keyup3-anim.gif

每次回车之后会触发input内的事件返回p标签的vlaue
(5)blur( 失去焦点 ) 事件
(blur)监听用户输入框失去焦点的事件。

修改app/keyup.components.ts 文件
  @Component({
    selector: 'key-up4',
    template: `
      <input #box
        (keyup.enter)="values=box.value"
        (blur)="values=box.value">
      <p>{{values}}</p>
    `
  })
  export class KeyUpComponent_v4 {
    values = '';
  }

失去焦点的时候会产生事件values的值被显示出来

我们已经掌握了响应用户输入和操作的基础技术。 虽然这些基础技术确实强大,但在处理大量用户输入时难免显得笨拙。 我们在事件底层操作,但是真正应该做的是:在数据输入字段和模型属性之间建立双向数据绑定。
##这节结束了 请点个赞吧——_——

推荐阅读更多精彩内容