BINDING LÀ GÌ

     

Giới thiệu nội dung bài bác viết

Chào những bạn, bây giờ anh sẽ gợi ý mọi người 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 đồng điệu giữa component cùng tầng view (template file html). Lấy một ví dụ khi bạn dùng update data ở tầng view thì Angular cũng update giá trị kia ở component.Bạn đang xem: Binding là gì

Data binding trong Angular rất có thể chia ra có tác dụng 2 nhóm. Đó là one way binding (binding 1 chiều) cùng two way binding (binding 2 chiều).

Bạn đang xem: Binding là gì

One way binding là gì

One way binding thì tài liệu được truyền 1 chiều. Rất có thể từ view sang component hoặc trái lại từ component lịch sự view.

tự component thanh lịch view chúng ta sử dụng Interpolation & Property Binding nhằm hiển thị tài liệu như sau: chúng ta sử dụng để hiển thị quý giá từ component thanh lịch view.

Xem thêm: Biếc Rờn Là Gì - Nghĩa Của Từ Biếc

Ví dụ ta 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 tài liệu trong component này có là firstName cùng lastName. Ta hiển thị bên View như sau:

1Welcome, firstName lastName
ngược lại nếu trường đoản cú View truyền dữ liệu về component thì ta 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 bọn họ sử dụng để bind các sự kiện như click chuột, sự kiện bàn phím etc. Họ sử dụng cú pháp sau để thực hiện sự khiếu nại khi loài chuột click vào nút Save. Tiếp nối nó sẽ điện thoại tư vấn hàm onSave bên 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 có nghĩa là chúng ta đổi khác dữ liệu tự component qua view và ngược lại từ view bọn chúng ta thay đổi dữ liệu.

Xem thêm: Âm Thanh Dsd Là Gì ? Chuẩn Nhạc Cao Nhất Hiện Tại Dsd, Dxd Là Gì

2 way binding thì bổ ích khi mình có tác dụng form. Chúng ta sử dụng ngModel để tiến hành 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 tín đồ hãy Subscribe kênh youtube dưới đây nhé để cập nhật các đoạn phim mới độc nhất vô nhị về chuyên môn và kỹ năng mềm

những khoá học tập lập trình MIỄN PHÍ tại phía trên

Comments