Angular 2 用戶輸入

用戶點擊鏈接、按下按鈕或者輸入文字時，這些用戶的交互行為都會觸發 DOM 事件。

本章中，我們將學習如何使用 Angular 事件綁定語法來綁定這些事件。

以下Gif圖演示了該實例的操作：

源代碼可以在文章末尾下載。

綁定到用戶輸入事件

我們可以使用 Angular 事件綁定機制來響應任何 DOM 事件 。

以下實例將綁定了點擊事件：

點我!

等號左邊的 (click) 表示把該按鈕的點擊事件作為綁定目標 。 等號右邊，引號中的文本是一個 模板語句

完整代碼如下：

app/click-me.component.ts 文件：

import{Component}from'@angular/core';

@Component({selector:'click-me',template: `

點我!{{clickMessage}}`})exportclassClickMeComponent{clickMessage='';onClickMe(){this.clickMessage='菜鳥教程!';}}

通過 $event 對象取得用戶輸入

我們可以綁定到所有類型的事件。

讓我們試試綁定到一個輸入框的 keyup 事件，并且把用戶輸入的東西回顯到屏幕上。

app/keyup.component.ts (v1) 文件：

@Component({selector:'key-up1',template: `

{{values}}

`})exportclassKeyUpComponent_v1{values='';/*// 非強類型

onKey(event:any) {

this.values += event.target.value + ' | ';

}*///強類型onKey(event:KeyboardEvent){this.values+=(event.target).value+'|';}}

以上代碼中我們監聽了一個事件并捕獲用戶輸入，Angular 把事件對象存入 $event 變量中。

組件的 onKey() 方法是用來從事件對象中提取出用戶輸入的，再將輸入的值累加到 values 的屬性。

從一個模板引用變量中獲得用戶輸入

你可以通過使用局部模板變量來顯示用戶數據，模板引用變量通過在標識符前加上井號 (#) 來實現。

下面的實例演示如何使用局部模板變量：

app/loop-back.component.ts 文件：

@Component({selector:'loop-back',template: `

{{box.value}}

`})exportclassLoopbackComponent{}

我們在 元素上定義了一個名叫 box 的模板引用變量。

box 變量引用的就是 元素本身，這意味著我們可以獲得 input 元素的 value 值，并通過插值表達式把它顯示在

標簽中。

我們可以使用模板引用變量來修改以上 keyup 的實例：

app/keyup.components.ts (v2) 文件：

@Component({selector:'key-up2',template: `

{{values}}

`})exportclassKeyUpComponent_v2{values='';onKey(value:string){this.values+=value+'|';}}

按鍵事件過濾 ( 通過 key.enter)

我們可以只在用戶按下回車 (enter) 鍵的時候才獲取輸入框的值。

(keyup) 事件處理語句會聽到每一次按鍵，我們可以過濾按鍵，比如每一個 $event.keyCode，只有在按下回車鍵才更新 values 屬性。

Angular 可以為我們過濾鍵盤事件，通過綁定到 Angular 的 keyup.enter 偽事件監聽回車鍵的事件。

app/keyup.components.ts (v3)：

@Component({selector:'key-up3',template: `

{{values}}

`})exportclassKeyUpComponent_v3{values='';}

blur( 失去焦點 ) 事件

接下來我們可以使用blur( 失去焦點 ) 事件，它可以再元素失去焦點后更新 values 屬性。

以下實例同時監聽輸入回車鍵與輸入框失去焦點的事件。

app/keyup.components.ts (v4)：

@Component({selector:'key-up4',template: `

{{values}}

`})exportclassKeyUpComponent_v4{values='';}

本文所使用的源碼可以通過以下方式下載，不包含 node_modules 和 typings 目錄。

總結

以上是生活随笔為你收集整理的angular4输入有效性_Angular 2 用户输入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。