Jaka jest różnica między nawiasami, nawiasami i gwiazdkami w Angular2?

Czytałem skróconą instrukcję Angular 1 do 2 na stronie Angular i jedną rzeczą, której nie do końca rozumiałem, była różnica między tymi znakami specjalnymi. Na przykład taki, który używa gwiazdek:

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

Rozumiem, że symbol krzyżyka (#) definiuje się moviejako zmienną szablonu lokalnego, ale co oznacza gwiazdka przed nim ngFor? Czy to konieczne?

Dalej są przykłady, w których są używane nawiasy:

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

W pewnym sensie rozumiem, że nawiasy wokół routerLinkwiążą go z tym atrybutem HTML / dyrektywą Angular. Czy to oznacza, że ​​są one wskaźnikiem dla Angulara do oceny wyrażenia? Jak [id]="movieId"byłby odpowiednik id="movie-{{movieId}}"w Angular 1?

Na koniec są nawiasy:

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

Czy są one używane tylko do wydarzeń DOM i czy możemy używać innych wydarzeń, takich jak (load)="someFn()"lub (mouseenter)="someFn()"?

Myślę, że prawdziwe pytanie brzmi: czy te symbole mają specjalne znaczenie w Angular 2 i jaki jest najłatwiejszy sposób, aby dowiedzieć się, kiedy użyć każdego z nich ? Dzięki!!

Wszystkie szczegóły można znaleźć tutaj: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- jest skrótem odręcznym dla dyrektyw strukturalnych, gdzie długi formularz można zastosować tylko do <template>znaczników. Forma krótka niejawnie otacza element, w którym jest zastosowana w pliku <template>.

• [prop]="value"służy do powiązania obiektu z właściwościami ( @Input()komponentu lub dyrektywy Angular albo właściwości elementu DOM).
  Istnieją specjalne formularze:

  • [class.className] wiąże się z klasą css, aby ją włączyć / wyłączyć
  • [style.stylePropertyName] wiąże się z właściwością stylu
  • [style.stylePropertyName.px] wiąże się z właściwością stylu z predefiniowaną jednostką
  • [attr.attrName] wiąże wartość z atrybutem (widoczne w DOM, podczas gdy właściwości nie są widoczne)
  • [role.roleName] wiąże się z atrybutem roli ARIA (jeszcze niedostępny)

• prop="{{value}}"wiąże wartość z właściwością. Wartość jest uszeregowana (inaczej interpolacja)

• (event)="expr"wiąże procedurę obsługi zdarzeń ze zdarzeniem @Output()lub DOM

• #varlub #varpełni różne funkcje w zależności od kontekstu

  • W *ngFor="#x in y;#i=index"zakresie są tworzone zmienne dla iteracji
    (w wersji beta.17 jest to zmieniane na * ngFor = "niech x w y; niech i = indeks" `)
  • W elemencie DOM <div #mydiv>odniesienie do elementu
  • W komponencie kątowym odniesienie do komponentu
  • W elemencie, który jest składnikiem Angular lub ma dyrektywę Angular, w której exportAs:"ngForm"jest zdefiniowana, #myVar="ngForm"tworzy odniesienie do tego składnika lub dyrektywy.

[]- Powiązanie właściwości Jednokierunkowe ze źródła danych do celu wyświetlenia. na przykład

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

Możemy użyć bind- zamiast []

()-> Powiązanie zdarzeń Jednokierunkowe od celu widoku do źródła danych

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

Możemy użyć on- zamiast ()

[()]- Dwustronnie wiążący banan w pudełku

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

Możemy użyć bindon- zamiast [()]

Jak już wspomniano, dokumentacja Angulara, zwłaszcza „samouczek bohatera”, wyjaśnia to głębiej. Oto link, jeśli chcesz to sprawdzić .

Nawiasy to zdarzenia elementu, nad którym pracujesz, takie jak kliknięcie przycisku, takiego jak Twój przykład; może to być również kursor myszy, keyup, onselect lub dowolna akcja / zdarzenie dla tego elementu, a po znaku =znajduje się nazwa metody do wywołania - używając nawiasów dla wywołania. Ta metoda powinna być zdefiniowana w twojej klasie komponentu, tj .:

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

Nawiasy działają w drugą stronę. Mają one pobierać dane z Twojej klasy - w przeciwieństwie do nawiasów, które wysyłały zdarzenie - więc typowym przykładem jest użycie stylu takiego:

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

Widzieć? Nadajesz elementowi styl oparty na modelu / klasie.

Do tego mógłbyś użyć ...

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

Zaleca się, aby używać podwójnych nawiasów klamrowych do rzeczy, które wydrukujesz na ekranie, takich jak:

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

Cokolwiek używasz, jeśli jesteś konsekwentny, pomoże to w czytelności twojego kodu.

Na koniec, dla twojego *pytania, jest to dłuższe wyjaśnienie, ale jest bardzo BARDZO ważne: abstrahuje implementację niektórych metod, które w przeciwnym razie musiałbyś zrobić, ngForaby zadziałało.

Jedną ważną aktualizacją jest to, że ngFornie będziesz już używać skrótu; musisz letzamiast tego użyć w następujący sposób:

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

Ostatnią rzeczą, o której warto wspomnieć, jest to, że wszystkie powyższe dotyczą również twoich komponentów, np. Jeśli utworzysz metodę w swoim komponencie, zostanie ona wywołana przy użyciu ():

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