Apa perbedaan antara tanda kurung, tanda kurung, dan tanda bintang di Angular2?

Saya telah membaca referensi cepat Sudut 1 ke 2 di situs web Sudut , dan satu hal yang saya tidak sepenuhnya mengerti adalah perbedaan antara karakter khusus ini. Misalnya yang menggunakan tanda bintang:

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

Saya mengerti di sini bahwa simbol hash (#) mendefinisikan moviesebagai variabel templat lokal, tetapi apa arti tanda bintang sebelumnya ngFor? Dan, apakah itu perlu?

Berikutnya, adalah contoh yang menggunakan tanda kurung:

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

Saya agak mengerti bahwa tanda kurung di sekitar routerLinkmengikatnya ke atribut HTML / arahan Angular. Apakah ini berarti bahwa mereka adalah penunjuk bagi Angular untuk mengevaluasi ekspresi? Seperti [id]="movieId"akan menjadi setara dengan id="movie-{{movieId}}"di Angular 1?

Terakhir, adalah tanda kurung:

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

Apakah ini hanya digunakan untuk acara DOM dan bisakah kita menggunakan acara lain seperti (load)="someFn()"atau (mouseenter)="someFn()"?

Saya kira pertanyaan sebenarnya adalah, apakah simbol-simbol ini memiliki makna khusus dalam Angular 2, dan apa cara termudah untuk mengetahui kapan harus menggunakan masing-masing ? Terima kasih!!

Semua detail dapat ditemukan di sini: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- adalah bentuk tangan pendek untuk arahan struktural di mana bentuk panjang hanya dapat diterapkan ke <template>tag. Bentuk singkat secara implisit membungkus elemen di mana itu diterapkan dalam <template>.

• [prop]="value"adalah untuk pengikatan objek dengan properti ( @Input()dari komponen Sudut atau direktif atau properti dari elemen DOM).
  Ada bentuk khusus:

  • [class.className] mengikat ke kelas css untuk mengaktifkan / menonaktifkannya
  • [style.stylePropertyName] mengikat ke properti gaya
  • [style.stylePropertyName.px] mengikat properti gaya dengan unit preset
  • [attr.attrName] mengikat nilai ke atribut (terlihat di DOM, sementara properti tidak terlihat)
  • [role.roleName] mengikat atribut peran ARIA (belum tersedia)

• prop="{{value}}"mengikat nilai ke properti. Nilai ini dirender (alias interpolasi)

• (event)="expr"mengikat pengendali acara ke acara @Output()atau DOM

• #varatau #varmemiliki fungsi yang berbeda tergantung pada konteksnya

  • Dalam *ngFor="#x in y;#i=index"lingkup, variabel untuk iterasi dibuat
    (Dalam beta.17 ini diubah menjadi * ngFor = "let x in y; let i = index" `)
  • Pada elemen DOM <div #mydiv>referensi ke elemen
  • Pada komponen Angular referensi ke komponen
  • Pada elemen yang merupakan komponen Angular atau memiliki arahan Angular di mana exportAs:"ngForm"didefinisikan, #myVar="ngForm"membuat referensi ke komponen atau arahan ini.

[]- Pengikatan properti Satu arah dari sumber data untuk melihat target. misalnya

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

Kita bisa menggunakan bind- bukan []

()-> Penjilidan Acara Satu arah dari target tampilan ke sumber data

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

Kita bisa menggunakan on- bukannya ()

[()]- Mengikat Pisang dua arah dalam sebuah kotak

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

Kita bisa menggunakan bindon- alih-alih [()]

Seperti yang sudah disebutkan, dokumentasi Angular, terutama "tutorial pahlawan", menjelaskan ini lebih dalam. Inilah tautannya jika Anda ingin memeriksanya .

Kurung adalah peristiwa elemen yang sedang Anda kerjakan, seperti klik pada tombol seperti contoh Anda; ini juga bisa menjadi mouse, keyup, onselect atau tindakan / peristiwa apa pun untuk elemen itu, dan apa yang setelah itu =adalah nama metode untuk memanggil - menggunakan tanda kurung untuk panggilan. Metode itu harus didefinisikan pada kelas komponen Anda, yaitu:

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

Kurung bekerja dengan cara lain. Mereka akan mendapatkan data dari kelas Anda - kebalikan dari tanda kurung yang mengirim acara - jadi contoh umum adalah penggunaan gaya seperti ini:

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

Lihat? Anda memberi elemen gaya berdasarkan model / kelas Anda.

Untuk ini, Anda bisa menggunakan ...

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

Rekomendasinya adalah Anda menggunakan kurung keriting ganda untuk hal-hal yang akan Anda cetak di layar seperti:

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

Apa pun yang Anda gunakan, jika Anda konsisten, itu akan membantu keterbacaan kode Anda.

Terakhir, untuk *pertanyaan Anda , ini adalah penjelasan yang lebih panjang, tetapi sangat SANGAT penting: Ini mengabstraksi beberapa metode yang seharusnya Anda lakukan untuk mendapatkan ngForpekerjaan.

Satu pembaruan penting adalah bahwa ngForAnda tidak akan lagi menggunakan hash; Anda harus menggunakan letsebagai berikut:

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

Satu hal terakhir yang layak disebutkan adalah bahwa semua hal di atas berlaku juga untuk komponen Anda, misalnya jika Anda membuat metode dalam komponen Anda, itu akan dipanggil menggunakan ():

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