用户输入触发 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

修改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

修改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的值被显示出来

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