Angular2'de parantezler, köşeli parantezler ve yıldız işaretleri arasındaki fark nedir?

Angular web sitesinde Angular 1'den 2'ye hızlı referansı okudum ve tam olarak anlamadığım bir şey, bu özel karakterler arasındaki farktı. Örneğin, yıldız kullanan biri:

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

Burada hash (#) sembolünün movieyerel bir şablon değişkeni olarak tanımlandığını anlıyorum , ancak önceki yıldız işareti ne anlama ngForgeliyor? Ve gerekli mi?

Ardından, parantez kullanan örnekler:

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

Etrafındaki parantezlerin routerLinkonu bu HTML niteliği / Angular yönergesine bağladığını biraz anlıyorum . Bu, Angular'ın bir ifadeyi değerlendirmesi için bir işaretçi oldukları anlamına mı geliyor? Beğen , Angular 1'deki [id]="movieId"eşdeğeri olur id="movie-{{movieId}}"mu?

Son olarak, parantezler:

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

Bunlar yalnızca DOM olayları için mi kullanılıyor ve (load)="someFn()"veya gibi diğer olayları kullanabilir miyiz (mouseenter)="someFn()"?

Sanırım asıl soru şu: Bu sembollerin Angular 2'de özel bir anlamı var mı ve her birini ne zaman kullanacağınızı bilmenin en kolay yolu nedir? Teşekkürler!!

Tüm ayrıntılar burada bulunabilir: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- uzun biçimin yalnızca <template>etiketlere uygulanabildiği yapısal yönergeler için kısa el biçimidir . Kısa biçim, dolaylı olarak, uygulandığı öğeyi bir <template>.

• [prop]="value"özelliklere ( @Input()bir Angular bileşeninin veya yönergesinin veya bir DOM öğesinin bir özelliğinin) nesneye bağlanması içindir .
  Özel formlar var:

  • [class.className] etkinleştirmek / devre dışı bırakmak için bir css sınıfına bağlanır
  • [style.stylePropertyName] bir stil özelliğine bağlanır
  • [style.stylePropertyName.px] önceden ayarlanmış bir birimle bir stil özelliğine bağlanır
  • [attr.attrName] bir değeri bir özniteliğe bağlar (özellikler görünmezken DOM'da görünür)
  • [role.roleName] ARIA rol özniteliğine bağlanır (henüz mevcut değil)

• prop="{{value}}"bir özelliğe bir değer bağlar. Değer telli hale getirilir (aka enterpolasyon)

• (event)="expr"bir olay işleyicisini bir @Output()veya DOM olayına bağlar

• #varveya #varbağlama göre farklı işlevleri vardır

  • *ngFor="#x in y;#i=index"Yineleme için bir kapsam değişkenleri oluşturulur
    (beta.17'de bu, * ngFor = "let x in y; let i = index" `olarak değiştirilir)
  • Bir DOM öğesinde <div #mydiv>, öğeye bir başvuru
  • Açısal bir bileşen üzerinde bileşene bir referans
  • Bir Angular bileşeni olan veya exportAs:"ngForm"tanımlandığı yerde bir Angular yönergesi olan bir eleman üzerinde, #myVar="ngForm"bu bileşene veya yönergeye bir referans oluşturur.

[]- Özellik bağlama Veri kaynağından görüntüleme hedefine tek yönlü. Örneğin

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

Yerine bind kullanabiliriz []

()-> Olay Bağlama Görünüm hedefinden veri kaynağına tek yönlü

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

() Yerine on- kullanabiliriz

[()]- Bir kutuda iki yönlü muz bağlama

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

Yerine bindon kullanabiliriz [()]

Daha önce de belirtildiği gibi, Angular dokümantasyon, özellikle "kahraman eğitimi" bunu daha derinlemesine açıklıyor. Kontrol etmek isterseniz bağlantı burada .

Parantezler, üzerinde çalıştığınız öğenin, örneğinizdeki gibi bir düğmenin tıklanması gibi olaylarıdır; bu aynı zamanda o öğe için fare imleci, keyup, onselect veya herhangi bir eylem / olay olabilir ve =aranacak yöntemin adından sonra - çağrı için parantez kullanılarak. Bu yöntem, bileşen sınıfınızda tanımlanmalıdır, yani:

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

Parantez diğer şekilde çalışır. Sınıfınızdan - olayı gönderen parantezin tersi - veri alacaklardır - bu nedenle yaygın bir örnek, aşağıdaki gibi bir stilin kullanılmasıdır:

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

Görmek? Elemana modelinize / sınıfınıza göre bir stil veriyorsunuz.

Bunun için kullanabilirdin ...

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

Ekranda aşağıdaki gibi yazdıracağınız şeyler için çift kıvrımlı parantez kullanmanızdır:

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

Ne kullanırsanız kullanın, tutarlı olursanız, kodunuzun okunabilirliğine yardımcı olacaktır.

Son olarak, *sorunuz için bu daha uzun bir açıklamadır, ancak ÇOK önemlidir: Bazı yöntemlerin uygulamalarını özetler, aksi takdirde işe koyulmak için yapmanız gerekecek ngFor.

Bir önemli güncelleme olması ile ngForartık kullanımı karma olacak; letbunun yerine aşağıdaki gibi kullanmanız gerekir :

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

Bahsetmeye değer son bir şey de, yukarıdakilerin tümünün bileşenleriniz için de geçerli olmasıdır, örneğin, bileşeninizde bir yöntem oluşturursanız, bu yöntem kullanılarak çağrılacaktır ():

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