Binding Là Gì

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

Chào chúng ta, bây giờ anh vẫn chỉ dẫn mọi fan phương pháp sử dụng data binding là như vậy nào?

Data binding là gì

Databinding là chuyên môn địa điểm tài liệu được nhất quán giữa component và tầng view (template tệp tin html). ví dụ như khi người tiêu dùng update data trên tầng view thì Angular cũng update quý giá đó sinh hoạt component.quý khách đã xem: Binding là gì

Data binding vào Angular có thể chia nhỏ ra có tác dụng 2 đội. Đó là one way binding (binding 1 chiều) với two way binding (binding 2 chiều).

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

One way binding là gì

One way binding thì dữ liệu được truyền một chiều. cũng có thể tự view quý phái component hoặc ngược chở lại trường đoản cú component lịch sự view.

Từ component sang view chúng ta áp dụng Interpolation và Property Binding nhằm hiển thị dữ liệu nhỏng sau: Chúng ta thực hiện nhằm hiển thị quý giá tự component sang trọng view.

Xem thêm: How To Download Windows Movie Maker Is Not Available For Download On Windows 10

lấy ví dụ ta tất cả component là

1234567891011

import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./ứng dụng.component.html", styleUrls: )export class AppComponent firstName= "Sachin"; lastName=”Tendulkar”

vì vậy dữ liệu vào component này có là firstName và lastName. Ta hiển thị mặt View nlỗi sau:

1	Welcome, firstName lastName

Ngược lại trường hợp trường đoản cú View truyền dữ liệu về component thì ta dùng Property binding nlỗi sau =”binding-source”

123	="title"> Example 1 ="isDisabled">I am disabled

1234567891011121314

import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./ứng dụng.component.html", styleUrls: )export class AppComponent title="Angular Property Binding Example" //Example 1 isDisabled= true;

Event Binding chúng ta áp dụng nhằm bind những sự khiếu nại nhỏng nhấn vào, sự kiện keyboard etc. Chúng ta sử dụng cú pháp sau để triển khai sự khiếu nại Lúc con chuột cliông chồng vào nút ít Save. Sau kia nó sẽ điện thoại tư vấn hàm onSave bên class component.

1	(click)="onSave()">Save

12345678910111213141516

import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./tiện ích.component.html", styleUrls: )export class AppComponent firstName= "Sachin"; lastName=”Tendulkar” onSave() //cách xử trí nút ít Save

Two way binding là gì

Binding 2 chiều có nghĩa là họ đổi khác dữ liệu từ bỏ component qua view cùng ngược chở lại trường đoản cú view họ biến hóa dữ liệu.

2 way binding thì bổ ích Khi mình làm size. Chúng ta sử dụng ngModel nhằm triển khai câu hỏi binding 2 chiều.

1234	Example 2 type="text" name="value" ="value"> You entered (click)="clearValue()">Clear

12345678910111213141516

import Component from "angular/core"; Component( selector: "app-root", templateUrl: "./tiện ích.component.html", styleUrls: )export class AppComponent value=""; clearValue() this.value="";

Play

Mọi người hãy Subscribe kênh youtube sau đây nhé để update những video clip tiên tiến nhất về kỹ thuật với khả năng mềm

Các khoá học lập trình sẵn MIỄN PHÍ trên trên đây

Comments