Binding Là Gì

admin 18/07/2022

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à

1234567891011

import 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:

1	Welcome, 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

1234567891011121314

import 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

12345678910111213141516

import 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

12345678910111213141516

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