Tại sao quyết định thiết kế được thực hiện để sử dụng các dấu ngoặc khác nhau?

Question

Tôi vừa mới bắt đầu học Angular2, và đã tự hỏi tại sao các nhà phát triển quyết định sử dụng các trình bao bọc khác nhau trong html? Ví dụ:

[(ngModel)]="some.property" 

(click)="someMethod()" 

[src]="some.property" 

tôi chắc chắn rằng có một lý do logic đẹp đằng sau nó, và tôi nhận thức được rằng họ đang sử dụng cho các mục đích khác nhau, nhưng thoạt nhìn có vẻ như không phù hợp và một trở ngại không cần thiết để vượt qua.

Answer 1

Mỗi cú pháp có mục tiêu riêng.

1) tổ chức sự kiện Binding

Đây là một cách ràng buộc từ nội để ngoài thành phần. Được gọi là event. Thành phần bên ngoài sẽ gọi số someMethod khi sự kiện click được kích hoạt từ thành phần bên trong hoặc từ tag hiện tại.

(click)="someMethod()" 

Ví dụ: Dưới đây button 's nhấp chuột handler gọi onClickMe() chức năng

@Component({ 
    selector: 'click-me', 
    template: ` 
    <button (click)="onClickMe()">Click me!</button> 
    {{clickMessage}}` 
}) 
export class ClickMeComponent { 
    clickMessage = ''; 

    onClickMe() { 
    this.clickMessage = 'You are my hero!'; 
    } 
} 

dữ liệu

2) Một cách ràng buộc

Đây là một cách ràng buộc từ ngoài vào bên trong. Điều này sẽ chuyển số some.property đến thuộc tính src ở bên trong component hoặc tag.

[src]="some.property" 

Ví dụ. Ở đây chúng ta liên kết với các tài sảninnerText giá trị của name tài sản

<h1 [innerText]="name"></h1> 

hoặc

<h1>{{ name }}</h1> 

3) Hai dữ liệu theo cách ràng buộc

Và đây là một cách hai ràng buộc từ bên trong đến bên ngoài và v ice versa. Điều này sẽ làm hai việc.

[(ngModel)]="some.property" 

Ví dụ: Ở đây giá trị input 's sẽ được cập nhật khi username sẽ được cập nhật. Và cũng như khi chúng tôi nhập một giá trị khác vào đầu vào, username sẽ được cập nhật. Vì vậy, ở đây bạn có được hai cách liên kết dữ liệu. Và dưới mui xe với [(ngModel)] nó tạo ra một chiều và sự kiện ràng buộc.dòng này

<input [(ngModel)]="name"> 

<p>Hello {{ name }}!</p> 

đều bình đẳng để

<input [value]="name" (input)="name = $event.target.value"> 

<p>Hello {{ name }}!</p> 

Đối với một kiến ​​thức sâu rộng, bạn có thể tìm kiếm trong documentation

Answer 2

này liên quan đến tầm nhìn và kiểm soát ràng buộc. dấu ngoặc vuông là ràng buộc từ cha mẹ sang con.

dấu ngoặc vuông thông thường là ràng buộc con với cha mẹ bằng cách sử dụng gọi lại sự kiện

cả hai đều là liên kết hai chiều.

Trong angular1 Tôi nghĩ rằng đã có ít nhiều quyền kiểm soát hướng ràng buộc.

bạn có thể ràng buộc từ bộ điều khiển để xem, vv Nhưng tôi sử dụng ví dụ thành phần con mẹ cho đơn giản.

Answer 3

Có ý nghĩa hoàn toàn khi sử dụng các dấu ngoặc khác nhau.

Có ba loại bạn đã đề cập.

1. tài sản Binding []
2. Event Binding ()
3. Two-Way Binding dữ liệu [()]

Thuộc tính ràng buộc được sử dụng để ràng buộc tính đến một yếu tố html. Vì vậy, bạn có thể sử dụng điều này cho mọi thuộc tính trên một phần tử html. Nó cũng được sử dụng bởi các chỉ thị góc mà bạn có thể sử dụng từ khuôn khổ hoặc xây dựng chính mình.

<img [src]="anImageUrlInTheComponent"> 
<!-- or --> 
<a [routerLink]="'/dashboard'">Dashboard</a> 

Sự kiện ràng buộc được sử dụng để ràng buộc các sự kiện như click, mouseover hoặc onSubmit, vv Bạn cũng có thể làm cho các sự kiện của riêng bạn trên một thành phần với EventEmitters nhưng đây là vấn đề khác.

<button (click)="doSomething()">Do Something</button> 
<!-- or --> 
<form (onSubmit)="submitForm()"> 
    <!-- form content --> 
</form> 

Cuối cùng là Liên kết dữ liệu hai chiều được sử dụng ví dụ trong NgModel. Tôi khuyên bạn nên đọc this bài viết về Ràng buộc dữ liệu hai chiều.

Hy vọng điều này sẽ giúp: D