User Input

1. Ràng buộc với User Input Events

Chúng ta có thể nghe any DOM event với một Angular Event Binding.

Chúng ta gán một biểu mẫu để các tên sự kiện DOM được bao bọc trong dấu ngoặc đơn. Dưới đấy là một minh họa về một sự kiện nhấp chuột Binding: (click) để bên trái của dấu "=" nhận diện sự kiện click của nút như là mục tiêu ràng buộc. Dòng text trong dấu ngoặc kép bên phải là "template expression" trong đó phản ứng với sự kiện nhấn bằng cách gọi phương thức onClickMe(). Một template expression là một tập con của JavaScript với một vài thủ thuật add trick.

Khi viết một binding chúng ta phải biết được các bối cảnh thực hiện template expression. Định danh xuất hiện trong một biểu thức thuộc về một bối cảnh cụ thể. Đối tượng đó thường là Angular Component điều khiển các template... ví dụ dưới đây minh họa điều đó: Các onClickMe trong template là các phương thức onClickMe của Component. Khi người dùng click vào nút, Anguar gọi phương thức onClickMe của Component.

2. Get User Input from the $even object

Chúng ta có thể liên kết với tất cả các sự kiện.

Ví dụ dưới đây minh họa vừa nghe một sự kiện vừa lấy user input. Angular làm cho một đối tượng event có sẵn trong biến $event.

Hình dạng của đối tượng event là xác định bất cứ điều gì làm tăng event. KeyUp event xuất phát từ DOM vậy biến $event phải có một standard DOM event object. $event.target cho chúng ta một HTMLInputElement trong đó có value và là nơi người dùng nhập dữ liệu.

Nhập các ký tự "abc" và chúng ta sẽ thấy:

3. Get user input from a local template variable

Có một cách khác để có được user input mà không cần biến $event.

Angular có tính năng gọi là cú pháp local template variables. Các biến cho chúng ta truy cập trực tiếp đến các phần tử. Chúng ta khai báo một local template variables bằng cách đặt trước một định danh với một hash/pound character.

Hãy chứng minh với một clever keystroke loopback trong một single line của template HTML. Chúng ta không thực sự cần một component chuyên dụng để làm điều này nhưng chúng ta sẽ làm cho một dòng anyway.

Chúng ta khai báo một local template variables với tên box trong thẻ input. Biến box là một tham chiếu của thẻ input có nghĩa là chúng ta có thể lấy đầu vào của value và hiển thị trong thẻ p. Các cập nhật sẽ hiển thị như chúng ta gõ.

Điều này sẽ không làm việc ở tất cả trừ khi chúng ta liên kết với sự kiện. Angular chỉ cập nhật các ràng buộc nếu chúng ta làm gì đó để đáp ứng với các sự kiện không đồng bộ như tổ hợp phím.

Trong ví dụ dưới đây chúng ta không thực sự quan tâm đến tất cả các sự kiện. Nhưng Event Binding đòi hỏi một template expression để đánh giá khi event fires.

4. Key event filtering (with key.enter)

Chúng ta chỉ quan tâm đến giá trị đầu vào khi người dùng chạm phím "Enter". Khi chúng ta liên kết với các event keyup thì biểu hiện sự kiện của chúng ta sẽ nghe mỗi phím tắt. Chúng ta có thể lọc các phím đầu tiên, kiểm tra mỗi $event.keyCode và cập nhật các giá trị duy nhất chỉ khi là phím "Enter".

Angular có thể lọc các sự kiện quan trọng đối với chúng ta. Angular có một cú pháp đặc biệt cho các sự kiện bàn phím. Chúng ta có thể lắng nghe chỉ là "Enter" bằng cách gắn vào Angular keyup.enter pseudo-event.

Sau đó chúng ta cập nhật các giá trị của component...bên trong các event expression hơn là component .

5. Ou Blur

Ví dụ trước đây của chúng ta sẽ không chuyển trạng thái hiện tại của hộp đầu vào, nếu người sử dụng chuột và nhấp chuột đi nơi khác trên trang.

Chúng ta chỉ cập nhật các giá trị của component's khi người dùng nhấn "Enter" bên trong hộp đầu vào.

Hãy khắc phục điều đó bằng cách lắng nghe sự kiện blur hộp đầu vào là tốt.

6. Put in all together

Đặt tất cả cùng nhau trong một ứng dụng vi mô có thể hiển thị một danh sách các heroes và thêm mới heroes vào danh sách đó bằng cách gõ vào hộp nhập liệu và nhấn "Enter", nhấn "Add", hoặc nhấn ở những nơi khác trên trang. Dưới đây là toàn bộ "Little Tour of Heroes" micro-app in a single component. Khi chúng ta gõ một tên hero mới trong input vì vậy chúng ta chọn newHero là một local template variables.

Chúng ta không thể sử dụng tên đó khi chúng ta khai báo biến với (#).

Các trình duyệt bắt buộc tất cả tên thuộc tính và yếu tố thành chữ thường, biến những gì sẽ được #newHero vào #newhero (tất cả chữ thường).

Chúng ta có thể truy cập các biến newHero từ bất kỳ anh chị em hoặc con của thẻ input. Khi người dùng nhấp chuột vào nút, chúng ta không cần một selector css ưa thích để theo dõi các hộp văn bản và trích xuất giá trị của nó.

*ng-for repeat Chỉ thị của ng-for là lặp đi lặp lại các template nhiều lần có những heroes trong list heroes.

Chúng ta phải nhớ để liệt kê NgFor trong những định hướng sử dụng bởi khuôn mẫu của thành phần bằng cách nhập các CORE_DIRECTIVES liên tục và thêm nó vào mảng directive @Component.