Data binding là gì

     

Giới thiệu nội dung bài xích viết

Chào những bạn, từ bây giờ anh sẽ lí giải mọi bạn cách sử dụng data binding là như thế nào?

Data binding là gì

Databinding là kỹ thuật nơi tài liệu được nhất quán giữa component với tầng view (template tệp tin html). Lấy ví dụ như khi tín đồ dùng update data trên tầng view thì Angular cũng cập nhật giá trị đó ở component.Bạn vẫn xem: Binding là gì

Data binding vào Angular hoàn toàn có thể chia ra làm cho 2 nhóm. Đó là one way binding (binding 1 chiều) với two way binding (binding 2 chiều).

Bạn đang xem: Data binding là gì

One way binding là gì

One way binding thì dữ liệu được truyền 1 chiều. Rất có thể từ view sang component hoặc trái lại từ component quý phái view.

tự component sang trọng view chúng ta sử dụng Interpolation & Property Binding để hiển thị tài liệu như sau: bọn họ sử dụng nhằm hiển thị quý hiếm từ component sang view.

Xem thêm: Tổng Hợp 40 Cách Làm Các Món Bánh Làm Từ Nồi Chiên Không Dầu Thơm Ngon

Ví dụ ta tất cả component là

1234567891011import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./app.component.html", styleUrls: )export class AppComponent firstName= "Sachin"; lastName=”Tendulkar”
Như vậy dữ liệu trong component này có là firstName và lastName. Ta hiển thị mặt View như sau:

1Welcome, firstName lastName
trái lại nếu tự View truyền dữ liệu về component thì ta cần sử dụng Property binding như sau =”binding-source”
123 ="title">

Example 1

="isDisabled">I am disabled
1234567891011121314import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./app.component.html", styleUrls: )export class AppComponent title="Angular Property Binding Example" //Example 1 isDisabled= true;
event Binding họ sử dụng nhằm bind các sự khiếu nại như click chuột, sự kiện keyboard etc. Chúng ta sử dụng cú pháp sau để thực hiện sự khiếu nại khi chuột click vào nút Save. Tiếp đến nó sẽ điện thoại tư vấn hàm onSave mặt class component.
1 (click)="onSave()">Save
12345678910111213141516import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./app.component.html", styleUrls: )export class AppComponent firstName= "Sachin"; lastName=”Tendulkar” onSave() //xử lý nút Save

Two way binding là gì

Binding 2 chiều tức là chúng ta đổi khác dữ liệu tự component qua view và ngược lại từ view chúng ta biến hóa dữ liệu.

Xem thêm: Vô Sinh Thứ Phát Là Gì, Nguyên Nhân Và Cách Điều Trị Hiệu Quả Nhất

2 way binding thì bổ ích khi mình làm cho form. Chúng ta sử dụng ngModel để triển khai việc binding 2 chiều.

1234

Example 2

type="text" name="value" ="value"> You entered

(click)="clearValue()">Clear
12345678910111213141516import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./app.component.html", styleUrls: )export class AppComponent value=""; clearValue() this.value="";

*

Play

Mọi bạn hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video clip mới nhất về kỹ thuật và năng lực mềm

các khoá học lập trình MIỄN PHÍ tại trên đây

Comments