Sự khác biệt giữa dấu ngoặc đơn, dấu ngoặc và dấu sao trong Angular2 là gì?

Tôi đã đọc tài liệu tham khảo nhanh Angular 1 đến 2 trên trang web Angular và một điều tôi không hoàn toàn hiểu là sự khác biệt giữa các nhân vật đặc biệt này. Ví dụ: sử dụng dấu hoa thị:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

Tôi hiểu ở đây rằng biểu tượng băm (#) định nghĩa movielà một biến mẫu cục bộ, nhưng dấu hoa thị trước ngForcó nghĩa là gì? Và, nó có cần thiết không?

Tiếp theo, là các ví dụ sử dụng dấu ngoặc:

<a [routerLink]="['Movies']">Movies</a>

Tôi phần nào hiểu rằng các dấu ngoặc xung quanh routerLinkliên kết nó với thuộc tính HTML / Chỉ thị góc. Điều này có nghĩa rằng chúng là một con trỏ để Angular đánh giá một biểu thức? Giống như [id]="movieId"sẽ tương đương với id="movie-{{movieId}}"trong Angular 1?

Cuối cùng, là dấu ngoặc đơn:

<button (click)="toggleImage($event)">

Có phải chúng chỉ được sử dụng cho các sự kiện DOM và chúng ta có thể sử dụng các sự kiện khác như (load)="someFn()"hay (mouseenter)="someFn()"không?

Tôi đoán câu hỏi thực sự là, những biểu tượng này có ý nghĩa đặc biệt trong Angular 2 không, và cách dễ nhất để biết khi nào nên sử dụng mỗi biểu tượng ? Cảm ơn!!

Tất cả các chi tiết có thể được tìm thấy ở đây: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- là hình thức bàn tay ngắn cho các chỉ thị cấu trúc trong đó hình thức dài chỉ có thể được áp dụng cho <template>các thẻ. Biểu mẫu ngắn hoàn toàn bao bọc phần tử được áp dụng trong a <template>.

• [prop]="value"dành cho đối tượng liên kết với các thuộc tính ( @Input()của thành phần Angular hoặc chỉ thị hoặc thuộc tính của thành phần DOM).
  Có các hình thức đặc biệt:

  • [class.className] liên kết với một lớp css để kích hoạt / vô hiệu hóa nó
  • [style.stylePropertyName] liên kết với một tài sản phong cách
  • [style.stylePropertyName.px] liên kết với một thuộc tính kiểu với một đơn vị đặt trước
  • [attr.attrName] liên kết một giá trị với một thuộc tính (hiển thị trong DOM, trong khi các thuộc tính không hiển thị)
  • [role.roleName] liên kết với thuộc tính vai trò ARIA (chưa có sẵn)

• prop="{{value}}"liên kết một giá trị với một tài sản. Giá trị được xâu chuỗi (còn gọi là nội suy)

• (event)="expr"liên kết một trình xử lý sự kiện với một sự kiện @Output()hoặc DOM

• #varhoặc #varcó các chức năng khác nhau tùy thuộc vào ngữ cảnh

  • Trong một *ngFor="#x in y;#i=index"biến phạm vi cho phép lặp được tạo
    (Trong phiên bản beta.17, điều này được thay đổi thành * ngFor = "let x in y; let i = index" `)
  • Trên phần tử DOM <div #mydiv> tham chiếu đến phần tử
  • Trên một thành phần Angular một tham chiếu đến thành phần
  • Trên một phần tử là thành phần Angular hoặc có chỉ thị Angular exportAs:"ngForm"được xác định, #myVar="ngForm"tạo tham chiếu đến thành phần hoặc chỉ thị này.

[]- Thuộc tính ràng buộc Một chiều từ nguồn dữ liệu để xem mục tiêu. ví dụ

{{expression}}
[target]="expression"
bind-target="expression"

Chúng ta có thể sử dụng bind- thay vì []

()-> Liên kết sự kiện Một chiều từ mục tiêu xem đến nguồn dữ liệu

(target)="statement"
on-target="statement"

Chúng ta có thể sử dụng on- thay vì ()

[()]- Binding Banana hai chiều trong một hộp

[(target)]="expression"
bindon-target="expression"

Chúng ta có thể sử dụng bindon- thay vì [()]

Như đã đề cập, tài liệu Angular, đặc biệt là "hướng dẫn anh hùng", giải thích điều này sâu hơn. Đây là liên kết nếu bạn muốn kiểm tra .

Dấu ngoặc đơn là các sự kiện của phần tử bạn đang làm việc, như nhấp vào nút như ví dụ của bạn; đây cũng có thể là mousedown, keyup, onselect hoặc bất kỳ hành động / sự kiện nào cho phần tử đó và =tên của phương thức cần gọi là gì - sử dụng dấu ngoặc đơn cho cuộc gọi. Phương thức đó nên được định nghĩa trên lớp thành phần của bạn, tức là:

<element (event)="method()"></element>

Chân đế hoạt động theo cách khác. Họ phải lấy dữ liệu từ lớp của bạn - ngược lại với dấu ngoặc đơn đang gửi sự kiện - vì vậy một ví dụ phổ biến là việc sử dụng một kiểu như thế này:

<element [ngStyle]="{display:someClassVariable}">

Xem? Bạn đang tạo cho phần tử một kiểu dựa trên mô hình / lớp của bạn.

Đối với điều này, bạn có thể đã sử dụng ...

<element style="display:{{ModelVariable}};">

Giới thiệu là bạn sử dụng dấu ngoặc kép cho những thứ bạn sẽ in trên màn hình như:

<h1>{{Title}}</h1>

Bất cứ điều gì bạn sử dụng, nếu bạn nhất quán, nó sẽ giúp dễ đọc mã của bạn.

Cuối cùng, đối với *câu hỏi của bạn , đó là một lời giải thích dài hơn, nhưng nó rất RẤT quan trọng: Nó trừu tượng hóa việc thực hiện một số phương pháp mà nếu không bạn sẽ phải làm để bắt ngForđầu làm việc.

Một cập nhật quan trọng là trong ngForbạn sẽ không còn sử dụng hàm băm; bạn cần sử dụng letthay thế như sau:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

Một điều đáng nói cuối cùng là tất cả những điều trên cũng áp dụng cho các thành phần của bạn, ví dụ nếu bạn tạo một phương thức trong thành phần của mình, nó sẽ được gọi bằng cách sử dụng ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>