用戶輸入觸發(fā) DOM 事件检吆。我們通過事件綁定來監(jiān)聽它們出爹，把更新過的數(shù)據(jù)導(dǎo)入回我們的組件和 model 逗抑。
（1）綁定到用戶輸入事件

例子：建個(gè)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!';
    }
  }

等號(hào)左邊為綁定的目標(biāo)，右邊為模板語句
寫綁定時(shí)壹瘟，我們必須知道模板語句的 執(zhí)行上下文 其障。 出現(xiàn)在模板語句中的各個(gè)標(biāo)識(shí)符银室，全都屬于一個(gè)特定的上下文對象。 這個(gè)對象通常都是控制此模板的 Angular 組件励翼。
selector：為自定義標(biāo)簽蜈敢，文件必須在app.module中導(dǎo)入；
導(dǎo)入的有import { 文件的根模塊 } from 文件路徑;
<pre>@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,ClickMeComponent ],//每次新建最好都添加上
bootstrap: [ AppComponent,ClickMeComponent ]
})</pre>
還有在html中必須把標(biāo)簽涵蓋進(jìn)去;
（2）通過 $event 對象取得用戶輸入
我們可以綁定到所有類型的事件汽抚。讓我們試試綁定到一個(gè)輸入框的 keyup 事件抓狭，并且把用戶輸入的東西回顯到屏幕上import { Component } from '@angular/core';

建個(gè)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強(qiáng)類型onKey事件
    export class KeyUpComponent_v1 {
      values = '';
      onKey(event: KeyboardEvent) {
       this.values += (<HTMLInputElement>event.target).value + ' | ';
      }
    }
    }

Angular 把事件對象存入 $event 變量中，也就是我們傳到組件的 onKey() 方法中的那個(gè)造烁。 我們希望取得的用戶數(shù)據(jù)就在該變量中的某個(gè)地方否过。
$event 對象的形態(tài)取決于所觸發(fā)的事件。 這個(gè) keyup 事件來自 DOM 惭蟋，所以 $event 必須是一個(gè) 標(biāo)準(zhǔn)的 DOM 事件對象 苗桂。 $event.target 給了我們一個(gè) HTMLInputElement 對象，它有一個(gè) value 屬性告组，是用戶所輸入的數(shù)據(jù)煤伟。

使用強(qiáng)類型后，我們就能看出直接把 DOM 事件對象傳到方法里的做法有一個(gè)嚴(yán)重的問題：過多模板細(xì)節(jié)，太少關(guān)注點(diǎn)分離便锨。 ( 譯注： onKey 不應(yīng)該理會(huì)模板的實(shí)現(xiàn)細(xì)節(jié)围辙，只接收傳入字符串。需要強(qiáng)制轉(zhuǎn)換類型是代碼的壞味道放案。 )

keyup1-anim.gif

                                           #  `這個(gè)圖形在輸入框沒有內(nèi)容的時(shí)候在瀏覽器沒有任何變化姚建。`

（3）從一個(gè)模板引用變量中獲得用戶輸入
還有另一種方式，不用通過 $event變量來獲得用戶數(shù)據(jù)吱殉。
Angular 有一個(gè)叫做 模板引用變量 的語法特性掸冤。 這些變量給了我們直接訪問元素的能力。 通過在標(biāo)識(shí)符前加上井號(hào) (#) 考婴，我們就能定義一個(gè)模板引用變量.
在一個(gè)超簡單的模板中實(shí)現(xiàn)了一個(gè)聰明的按鍵反饋循環(huán)贩虾。如：

建個(gè)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 = '';
  }

失去焦點(diǎn)的時(shí)候會(huì)產(chǎn)生事件values的值被顯示出來

我們已經(jīng)掌握了響應(yīng)用戶輸入和操作的基礎(chǔ)技術(shù)考杉。 雖然這些基礎(chǔ)技術(shù)確實(shí)強(qiáng)大，但在處理大量用戶輸入時(shí)難免顯得笨拙舰始。 我們在事件底層操作崇棠，但是真正應(yīng)該做的是：在數(shù)據(jù)輸入字段和模型屬性之間建立雙向數(shù)據(jù)綁定。
##這節(jié)結(jié)束了 請點(diǎn)個(gè)贊吧——_——