1.Angular 2.0 中的變量

對(duì)輸入值的獲取，我們可以通過(guò)$event 來(lái)獲取，也可以通過(guò)變量來(lái)獲取。

template: `<input (keyup)="onKey($event)"><p>{{values}}</p>`

即，當(dāng)user 按下并釋放 一個(gè)按鈕是，就會(huì)觸發(fā)keyup 事件，Angular在$event 變量提供一個(gè)相應(yīng)的DOM事件對(duì)象，

export class KeyUpComponent_v1 {values = '';onKey(event:any) { // without type infothis.values += event.target.value + ' | ';} }

$event 對(duì)象的屬性取決于DOM 事件的類(lèi)型。而所有的標(biāo)準(zhǔn)DOM事件對(duì)象都有一個(gè)target 屬性，
上例將$event轉(zhuǎn)換為any類(lèi)型。 這樣簡(jiǎn)化了代碼，但是有成本。 沒(méi)有任何類(lèi)型信息能夠揭示事件對(duì)象的屬性，防止簡(jiǎn)單的錯(cuò)誤

傳入 $event 是靠不住的做法

Passing $event is a dubious practice

類(lèi)型化事件對(duì)象揭露了重要的一點(diǎn)，即反對(duì)把整個(gè) DOM 事件傳到方法中，因?yàn)檫@樣組件會(huì)知道太多模板的信息。

只有當(dāng)它知道更多它本不應(yīng)了解的 HTML 實(shí)現(xiàn)細(xì)節(jié)時(shí)，它才能提取信息。 這就違反了模板（用戶(hù)看到的）和組件（應(yīng)用如何處理用戶(hù)數(shù)據(jù)）之間的分離關(guān)注原則

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

如上圖的box 就是一個(gè)變量

轉(zhuǎn)載于:https://www.cnblogs.com/taoyoung/p/6147944.html

總結(jié)

以上是生活随笔為你收集整理的Angular2.0 基础: User Input的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。