Liên kết hai chiều trong Angular là gì?
Với ràng buộc hai chiều, các thành phần của bạn có thể chia sẻ dữ liệu, xử lý các sự kiện và cập nhật giá trị trong thời gian thực.
Liên kết hai chiều cho phép người dùng nhập dữ liệu từ HTML và gửi nó đến tệp TypeScript và quay lại. Điều này rất hữu ích cho việc xác thực đầu vào, thao tác và hơn thế nữa.
Sau khi bạn chuyển dữ liệu từ HTML sang TypeScript , bạn có thể sử dụng dữ liệu để hoàn thành logic nghiệp vụ nhất định. Một tình huống ví dụ sẽ là nếu bạn muốn kiểm tra xem tên được nhập vào trường đầu vào đã tồn tại hay chưa.
Mục Lục
Làm thế nào bạn có thể sử dụng ràng buộc hai chiều?
Liên kết hai chiều trong ứng dụng Angular thường được đặt trong .html tệp, bằng cách sử dụng ngModel chỉ thị. Liên kết hai chiều trong một biểu mẫu đầu vào có thể trông giống như sau:
<input
type="email"
id="email"
name="email"
placeholder="example@example.com"
[(ngModel)]="emailAddress"
/>bên trong .ts tập tin, địa chỉ email biến được liên kết với emailAddress từ biểu mẫu.
emailAddress: String = ''; Cách thiết lập một biểu mẫu mẫu trong ứng dụng Angular
Bằng cách xây dựng một ứng dụng cơ bản, bạn có thể sử dụng liên kết hai chiều để kiểm tra xem tên người dùng tiềm năng đã tồn tại hay chưa.
- Tạo một ứng dụng Angular mới.
- Chạy ng tạo thành phần lệnh để tạo một thành phần mới. Đây là nơi bạn sẽ lưu biểu mẫu.
ng generate component username-checker-form - Thay thế tất cả mã trong app.component.html tệp với các thẻ sau:
<app-username-checker-form> </app-username-checker-form> - Thêm CSS sau vào thành phần mới của bạn .css tập tin, đặt tại username-checker-form.component.cssđể tạo kiểu cho biểu mẫu:
.container {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
}.card {
width: 50%;
background-color: peachpuff;
border-radius: 1rem;
padding: 1rem;
}input {
border: 3px solid
border-radius: 5px;
height: 50px;
line-height: normal;
color:
display: block;
width: 100%;
box-sizing: border-box;
user-select: auto;
font-size: 16px;
padding: 0 6px;
padding-left: 12px;
}input:focus {
border: 3px solid
}.btn {
display: block;
outline: 0;
cursor: pointer;
border: 2px solid
border-radius: 3px;
color:
background:
font-size: 20px;
font-weight: 600;
line-height: 28px;
padding: 12px 20px;
width: 100%;
margin-top: 1rem;
}.btn:hover {
background:
border:
}.success {
color:
}.error {
color:
} - Thêm CSS sau vào src / styles.css để đặt họ phông chữ, nền và màu văn bản của ứng dụng tổng thể:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");body {
font-family: "Poppins";
background-color: papayawhip;
color:
} - Thay thế mã trong username-checker-form.component.htmlđể thêm biểu mẫu kiểm tra tên người dùng:
<div class="container">
<div class="card">
<h1> Username Checker </h1><form>
<input
type="text"
id="username"
name="username"
placeholder="Please enter a username"
/>
<button class="btn"> Save </button>
</form></div>
</div> - Chạy ứng dụng của bạn bằng lệnh ng phục vụ trong thiết bị đầu cuối.
ng serve - Xem đơn đăng ký của bạn tại http: // localhost: 4200 /.
Gửi dữ liệu giữa các tệp HTML và TypeScript
Sử dụng liên kết hai chiều để gửi dữ liệu đến .ts tập tin và quay lại .html tập tin. Điều này có thể thực hiện được với việc sử dụng ngModel ở dạng đầu vào các thẻ.
- Nhập FormsModule vào app.module.ts và thêm nó vào hàng nhập khẩu mảng:
import { FormsModule } from '@angular/forms';@NgModule({
imports: [
FormsModule
],
}) - Khai báo một tên tài khoản biến lớp trong .ts tập tin, username-checker-form.component.ts:
username: string = ''; - Trong username-checker-form.component.htmlcộng [(ngModel)] với tên tài khoản biến trong thẻ đầu vào. Điều này cho phép liên kết hai chiều và bất kỳ thứ gì được nhập vào đầu vào tên người dùng của biểu mẫu sẽ được gán cho biến tên người dùng trong .ts tập tin.
<input
type="text"
id="username"
name="username"
placeholder="Please enter a username"
[(ngModel)]="username"
/> - Để kiểm tra dữ liệu đó đang được gửi đến .ts tập tin, tạo một tiết kiệm() phương pháp trong username-checker-form.component.ts. Khi bạn gửi biểu mẫu, ứng dụng sẽ gọi chức năng này.
save(): void {
console.log(this.username);
} - Thêm ngSubmit chỉ thị cho các thẻ
- Khi nhấp vào nút Lưu, tiết kiệm() hàm sẽ in giá trị đã nhập vào trường nhập vào bảng điều khiển. Bạn có thể xem bảng điều khiển trong thời gian chạy bằng các công cụ dành cho nhà phát triển của trình duyệt. Nếu bạn không quen với DevTools của trình duyệt hoặc xem bảng điều khiển, bạn có thể tìm hiểu thêm về cách sử dụng Chrome DevTools.
- Gửi tên tài khoản Quay trở lại .html tập tin. Thêm biến tên người dùng giữa dấu ngoặc nhọn vào username-checker-form.component.html sau các thẻ
- Trong username-checker-form.component.ts, thêm một số biến lớp để kiểm tra xem tên người dùng đã tồn tại hay chưa. Khai báo một tên người dùng mảng với một vài tên người dùng được sử dụng và thêm một thông điệp chuỗi thông báo cho người dùng về séc. Biến isValidUsername là true nếu tên người dùng đã nhập không nằm trong mảng tên người dùng.
usernames: string[] = [ 'bart', 'lisa', 'fry', 'leela' ];
message: string = '';
isValidUsername: boolean = false; - Các tiết kiệm() phương thức sẽ kiểm tra xem tên người dùng được nhập đã có trong mảng tên người dùng hiện tại hay chưa. Tùy thuộc vào kết quả, thông điệp sẽ được thiết lập cho phù hợp.
save(): void {
if (this.username != '') {
this.isValidUsername = !this.usernames.includes(
this.username.toLowerCase()
);if (this.isValidUsername) {
this.message = `Your new username is '${this.username}'`;
} else {
this.message = `The username '${this.username}' has already been taken`;
}
}
} - Hoàn thành việc username-checker-form.component.html tệp bằng cách hiển thị nếu tên người dùng đã nhập tồn tại hay không. Thêm thông báo lỗi bên dưới thẻ
sau biểu mẫu. Các isValidUsername biến hữu ích ở đây để xác định màu sắc của thông báo được hiển thị.
<p *ngIf="username" [ngClass]="isValidUsername ? 'success' : 'error'">
{{ message }}
</p> - Trong trình duyệt của bạn tại localhost: 4200cố gắng nhập tên người dùng tồn tại trong mảng tên người dùng:
Sau đó, cố gắng nhập tên người dùng không có.
Sử dụng ràng buộc hai chiều để gửi dữ liệu khi phát triển ứng dụng
Liên kết hai chiều hữu ích cho việc xác thực, kiểm tra, tính toán và hơn thế nữa. Nó cho phép các thành phần giao tiếp và chia sẻ dữ liệu trong thời gian thực.
Bạn có thể sử dụng các tính năng của ràng buộc hai chiều trong các phần khác nhau của ứng dụng. Khi bạn nhận được dữ liệu từ người dùng, bạn có thể thực thi logic nghiệp vụ và thông báo kết quả cho người dùng.
Đôi khi, bạn muốn lưu trữ dữ liệu của người dùng trong cơ sở dữ liệu. Bạn có thể khám phá các loại nhà cung cấp cơ sở dữ liệu khác nhau mà bạn có thể sử dụng, bao gồm cả Cơ sở dữ liệu Firebase NoSQL.