Angular2.0 基础: User Input
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)題。
- 上一篇: pysvn安装及常用方法
- 下一篇: dede文章调用时过滤调 body里面的