Angular 2 - Người dùng nhập
Trong Angular 2, bạn có thể sử dụng cấu trúc phần tử DOM của HTML để thay đổi giá trị của các phần tử tại thời điểm chạy. Hãy xem xét một số chi tiết.
Thẻ đầu vào
Trong tệp app.component.ts, hãy đặt mã sau.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '
<div>
<input [value] = "name" (input) = "name = $event.target.value">
{{name}}
</div>
'
})
export class AppComponent { }
Những điều sau đây cần được lưu ý về đoạn mã trên.
[value] = ”username” - Điều này được sử dụng để liên kết tên người dùng biểu thức với thuộc tính giá trị của phần tử đầu vào.
(input) = ”expression” - Đây là một cách khai báo để liên kết một biểu thức với sự kiện đầu vào của phần tử đầu vào.
username = $event.target.value - Biểu thức được thực thi khi sự kiện đầu vào được kích hoạt.
$event - Là một biểu thức được đưa ra trong các ràng buộc sự kiện bởi Angular, có giá trị là trọng tải của sự kiện.
Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.
Bây giờ bạn có thể nhập bất kỳ thứ gì và cùng một đầu vào sẽ phản ánh trong văn bản bên cạnh Điều khiển đầu vào.
Nhấp vào Đầu vào
Trong tệp app.component.ts, hãy đặt mã sau.
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})
export class AppComponent {
clickMessage = 'Hello';
onClickMe() {
this.clickMessage = 'This tutorial!';
}
}
Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.
Khi bạn nhấn nút Click Me, bạn sẽ nhận được kết quả sau.