Was ist der Unterschied zwischen Klammern, Klammern und Sternchen in Angular2?

Ich habe die Kurzreferenz zu Angular 1 bis 2 auf der Angular-Website gelesen , und eine Sache, die ich nicht vollständig verstanden habe, war der Unterschied zwischen diesen Sonderzeichen. Zum Beispiel eine, die Sternchen verwendet:

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

Ich verstehe hier, dass das Hash-Symbol (#) movieals lokale Vorlagenvariable definiert ist, aber was bedeutet das Sternchen zuvor ngFor? Und ist es notwendig?

Als nächstes sind die Beispiele aufgeführt, die Klammern verwenden:

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

Ich verstehe etwas, dass die Klammern routerLinkes an das HTML-Attribut / die Angular-Direktive binden. Bedeutet dies, dass sie ein Zeiger für Angular sind, um einen Ausdruck auszuwerten? Wie [id]="movieId"wäre das Äquivalent von id="movie-{{movieId}}"in Winkel 1?

Schließlich sind Klammern:

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

Werden diese nur für DOM-Ereignisse verwendet und können wir andere Ereignisse wie (load)="someFn()"oder verwenden (mouseenter)="someFn()"?

Ich denke, die eigentliche Frage ist, ob diese Symbole in Winkel 2 eine besondere Bedeutung haben und wie man am einfachsten weiß, wann man sie verwendet . Vielen Dank!!

Alle Details finden Sie hier: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- ist die Kurzform für strukturelle Anweisungen, bei denen die Langform nur auf <template>Tags angewendet werden kann . Die Kurzform umschließt implizit das Element, in dem es angewendet wird, in a <template>.

• [prop]="value"dient zur Objektbindung an Eigenschaften ( @Input()einer Winkelkomponente oder -anweisung oder einer Eigenschaft eines DOM-Elements).
  Es gibt spezielle Formen:

  • [class.className] bindet an eine CSS-Klasse, um sie zu aktivieren / deaktivieren
  • [style.stylePropertyName] bindet an eine Stileigenschaft
  • [style.stylePropertyName.px] bindet an eine Stileigenschaft mit einer voreingestellten Einheit
  • [attr.attrName] bindet einen Wert an ein Attribut (im DOM sichtbar, während Eigenschaften nicht sichtbar sind)
  • [role.roleName] bindet an das ARIA-Rollenattribut (noch nicht verfügbar)

• prop="{{value}}"bindet einen Wert an eine Eigenschaft. Der Wert ist stringifiziert (auch bekannt als Interpolation).

• (event)="expr"bindet einen Ereignishandler an ein @Output()oder DOM-Ereignis

• #varoder #varhat je nach Kontext unterschiedliche Funktionen

  • In einem *ngFor="#x in y;#i=index"Bereich werden Variablen für die Iteration erstellt
    (In Beta.17 wird dies in * ngFor = "x in y lassen; i = Index lassen" `geändert)
  • Auf einem DOM-Element <div #mydiv>ein Verweis auf das Element
  • Auf einer Winkelkomponente ein Verweis auf die Komponente
  • Erstellt für ein Element, das eine Angular-Komponente ist oder dessen Angular-Direktive exportAs:"ngForm"definiert ist, #myVar="ngForm"einen Verweis auf diese Komponente oder Direktive.

[]- Eigenschaftsbindung Einweg von der Datenquelle zum Ansichtsziel. z.B

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

Wir können bind- anstelle von verwenden []

()-> Ereignisbindung Einweg vom Ansichtsziel zur Datenquelle

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

Wir können on- anstelle von () verwenden

[()]- Zwei-Wege-Bindung Banane in einer Box

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

Wir können bindon- anstelle von verwenden [()]

Wie bereits erwähnt, erklärt die Angular-Dokumentation, insbesondere das "Helden-Tutorial", dies ausführlicher. Hier ist der Link, wenn Sie es überprüfen möchten .

Klammern sind Ereignisse des Elements, an dem Sie arbeiten, z. B. das Klicken auf eine Schaltfläche wie in Ihrem Beispiel. Dies kann auch Mousedown, Keyup, Onselect oder eine Aktion / ein Ereignis für dieses Element sein. Nach dem =steht der Name der aufzurufenden Methode - unter Verwendung der Klammer für den Aufruf. Diese Methode sollte für Ihre Komponentenklasse definiert werden, dh:

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

Klammern funktionieren umgekehrt. Sie sollen Daten von Ihrer Klasse abrufen - das Gegenteil der Klammer, die das Ereignis gesendet hat -, daher ist die Verwendung eines Stils wie diesem ein häufiges Beispiel:

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

Sehen? Sie geben dem Element einen Stil, der auf Ihrem Modell / Ihrer Klasse basiert.

Dafür hättest du ...

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

Die Empfehlung lautet, dass Sie doppelte geschweifte Klammern für Dinge verwenden, die Sie auf dem Bildschirm drucken möchten, wie:

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

Was auch immer Sie verwenden, wenn Sie konsistent sind, wird es die Lesbarkeit Ihres Codes verbessern.

Schließlich ist Ihre *Frage eine längere Erklärung, aber sie ist SEHR wichtig: Sie abstrahiert die Implementierung einiger Methoden, die Sie sonst tun müssten, um eine ngForzum Laufen zu bringen.

Ein wichtiges Update ist, dass Sie in dem ngForkein Hash mehr verwenden werden; Sie müssen letstattdessen wie folgt verwenden:

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

Eine letzte erwähnenswerte Sache ist, dass alle oben genannten Punkte auch für Ihre Komponenten gelten. Wenn Sie beispielsweise eine Methode in Ihrer Komponente erstellen, wird diese aufgerufen mit ():

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