Angular 2 Template-Syntax

Wir sind bereits in mehreren früheren Kapiteln auf Angular-Vorlagen gestoßen. In diesem Artikel werden wir die Angular-Syntax im Detail vorstellen.

Die Vorlage übernimmt die Rolle einer Ansicht; einfach ausgedrückt ist sie der Teil, der dem Benutzer angezeigt wird.

  • HTML
  • Interpolationsausdruck
  • Vorlagenausdrücke
  • Vorlagenanweisungen
  • Bindungssyntax
  • Eigenschaftsbindung
  • HTML-Attribut-, Klassen- und Stilbindung
  • Ereignisbindung
  • Zweiwege-Datenbindung mit NgModel
  • Eingebaute Direktiven
  • * und <template>
  • Vorlagen-Referenzvariablen
  • Eingabe- und Ausgabe-Eigenschaften
  • Vorlagenausdrucks-Operatoren

HTML

HTML ist die „Sprache“ von Angular-Vorlagen. Mit Ausnahme des <script>-Elements, das deaktiviert ist, werden alle anderen HTML-Elemente unterstützt. Zum Beispiel:

<h1>Meine erste Angular-App</h1>

Interpolationsausdruck

Das Syntaxformat von Interpolationsausdrücken ist:{{ ... }}。

Interpolationsausdrücke können die berechnete Zeichenfolge in HTML einfügen und auch als Attributwerte verwendet werden.

<h3> {{title}} <img src="{{imageUrl}}" style="height:30px"> </h3>

Vorlagenausdrücke

{{ ... }}Es handelt sich tatsächlich um einen Vorlagenausdruck. Angular wertet ihn aus und konvertiert ihn in einen String zur Ausgabe.

Das folgende Beispiel addiert zwei Zahlen:

<!-- "Die Summe von 1 + 1 ist 2" --> <p>Die Summe von 1 + 1 ist {{1 + 1}}</p>

Wir könnengetVal()verwenden, um den Wert dieses Ausdrucks zu erhalten:

<div class="example"> <div class="example_code"> [mycode3 type="html"] <!-- "4" --> <p>{{1 + 1 + getVal()}}</p>

Vorlagenausdrücke ähneln JavaScript. Viele JavaScript-Ausdrücke sind auch gültige Vorlagenausdrücke, aber nicht alle.

Die folgenden JavaScript-Ausdrücke sind verboten:

  • Zuweisungsausdrücke (=，+=，-=...）
  • new-Operator
  • with;oder'Verkettungsausdrücke
  • Inkrement- und Dekrementoperationen (++und--) Andere nennenswerte Unterschiede zur JavaScript-Syntax umfassen:
  • Bitweise Operatoren werden nicht unterstützt (|und&）
  • Operatoren in Vorlagenausdrücken wie|und?.etc., haben neue Bedeutungen erhalten

Eigenschaftsbindung

Die Vorlageneigenschaftsbindung kann eine Eigenschaft eines Ansichtselements auf einen Vorlagenausdruck setzen.

Die häufigste Eigenschaftsbindung setzt die Eigenschaft eines Elements auf den Wert einer Komponenteneigenschaft. Im folgenden Beispiel ist die src-Eigenschaft des Bildelements an die imageUrl-Eigenschaft der Komponente gebunden:

<img [src]="imageUrl">

Deaktivieren Sie eine Schaltfläche, wenn die Komponente isUnchanged (unverändert) ist:

<button [disabled]="isUnchanged">Die Schaltfläche ist deaktiviert</button>

Legen Sie die Attribute der Direktive fest:

<div [ngClass]="classes">[ngClass] gebunden an die classes-Eigenschaft.</div>

Legen Sie eine Eigenschaft einer benutzerdefinierten Komponente fest (ein wichtiger Weg für die Kommunikation zwischen Eltern- und Kindkomponenten):

<user-detail [user]="currentUser"></user-detail>

HTML-Attribut-, Klassen- und Stilbindung

Die Templatesteyntax bietet eine spezielle Einweg-Datenbindung für Szenarien, die sich nicht gut für die Eigenschaftsbindung (Property Binding) eignen.

Attribut-Bindung

Wenn ein Element keine Eigenschaft zum Binden besitzt, verwenden Sie die HTML-Attribut-Bindung.

Betrachten Sie Attribute wie ARIA, SVG und colspan/rowspan in Tabellen. Diese sind rein attributiv. Sie haben keine entsprechenden Eigenschaften, an die gebunden werden könnte.

Das folgende Beispiel führt zu einem Fehler:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

Wir erhalten diesen Fehler:

Template parse errors:
Can't bind to 'colspan' since it isn't a known native property

模板解析错误：不能绑定到'colspan'，因为它不是已知的原生属性

Wie der Hinweis besagt,<td>Element has nocolspanProperty. Interpolationsausdrücke und Eigenschaftsbindungen können jedoch nurPropertyfestlegen, statt eines Attributs. Daher ist die Bindung von HTML-Tag-Attributen erforderlich, um ähnliche Attribute zu erstellen und zu binden.

Die HTML-Tag-Attribut-Bindung ähnelt syntaktisch der Eigenschaftsbindung, aber der Teil in den Klammern ist kein Eigenschaftsname eines Elements. Stattdessen besteht er aus einem attr.-Präfix und dem Namen eines HTML-Tag-Attributs, und der Wert des HTML-Tag-Attributs wird über einen Ausdruck gesetzt, der zu einer Zeichenkette (String) ausgewertet werden kann. Zum Beispiel:

<table border=1> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table>

CSS-Klassen-Bindung

Mit der CSS-Klassen-Bindung können wir CSS-Klassennamen zum class-Attribut eines Elements hinzufügen und daraus entfernen.

Die CSS-Klassen-Bindung ähnelt syntaktisch der Eigenschaftsbindung. Aber der Teil in den eckigen Klammern ist kein Eigenschaftsname eines Elements; stattdessen besteht er aus einem class-Präfix, gefolgt von einem Punkt (.) und einem CSS-Klassennamen. Die letzten beiden Teile sind optional. Zum Beispiel:[class.class-name] 。

Das folgende Beispiel zeigt, wie die Klasse "special" über die CSS-Klassen-Bindung hinzugefügt und entfernt wird:

<!--Standard HTML style class setting--> <div class="bad curly special">Bad curly special</div> <!--Reset or override style classes through binding--> <div class="bad curly special" [class]="badCurly">Bad curly</div> <!--Add or remove the special style class based on a property value--> <div [class.special]="isSpecial">This style is special</div>

Style-Bindung

Durch die Style-Bindung können Sie Inline-Styles festlegen. Die Style-Bindung ähnelt syntaktisch der Eigenschaftsbindung, aber der Teil innerhalb der Klammern ist kein Eigenschaftsname eines Elements; die Style-Bindung besteht aus style. gefolgt von dem CSS-Style-Eigenschaftsnamen, zum Beispiel: [style.style-property].

<button [style.color] = "isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button> <!--Style binding with units--> <button [style.font-size.em]="isSpecial ? 3 : 1" >big</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >small</button>

Style-Eigenschaftsnamen können in Kebab-Case (font-size) oder CamelCase (fontSize) angegeben werden.

Ereignisbindung

Bei der Ereignisbindung (Event Binding) reagiert Angular auf den entsprechenden Datenfluss – vom Ansichtsziel zur Datenquelle –, indem es auf Benutzeraktionen wie Tastaturereignisse, Mausereignisse, Touch-Ereignisse usw. lauscht.

Die Syntax der Ereignisbindung besteht aus demtarget eventin den Anführungszeichen auf der rechten Seite.template statement.

Das folgende Beispiel ist beispielsweise eine Ereignisbindung, die auf das Klickereignis des Buttons lauscht. Immer wenn die Maus geklickt wird, ruft sie die MethodeonSave()der Komponente auf.

<button (click)="onSave()">Save</button>

Der Name in Klammern – zum Beispiel (click) – identifiziert das Zielereignis. Im folgenden Beispiel ist das Ziel das Klickereignis des Buttons.

<button (click)="onSave()">Save</button>

Sie können auch die on--Präfixform verwenden:

<button on-click="onSave()">On Save</button>

Zweiwege-Datenbindung mit NgModel

Bei der Entwicklung von Dateneingabeformularen ist das gewünschte Ergebnis, sowohl die Daten der Komponente im Formular anzuzeigen als auch die Daten der Komponente zu aktualisieren, wenn der Benutzer Änderungen vornimmt.

Das Folgende ist ein Beispiel für die Verwendung von[(NgModel)]zur Implementierung der Zwei-Wege-Bindung:

<input [(ngModel)]="currentUser.firstName">

[] implementiert den Datenfluss von der Komponente zum Template, () implementiert den Datenfluss vom Template zur Komponente, und die Kombination aus beiden [()] implementiert die Zwei-Wege-Bindung.

Verwendung der Präfix-Form-Syntax:

<input bindon-ngModel="currentUser.firstName">

Eingebaute Direktiven

Zu den integrierten Direktiven von Angular gehören NgClass, NgStyle, NgIf, NgFor, NgSwitch und so weiter.

NgClass

Fügen Sie CSS-Klassen dynamisch hinzu oder entfernen Sie sie, indem Sie an NgClass binden.

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >This div is large.</div>

NgStyle

Mit NgStyle können wir durch die Bindung an ein Schlüssel-Wert-Steuerungsobjekt viele Inline-Styles gleichzeitig festlegen.

setStyles() { let styles = { // CSS property name 'font-style': this.canSave ? 'italic' : 'normal', // italic 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal 'font-size': this.isSpecial ? '24px' : '8px', // 24px }; return styles; }

Durch das Hinzufügen einer NgStyle-Eigenschaftsbindung, die setStyles aufruft, können Sie die Styles des Elements entsprechend festlegen:

<div [ngStyle]="setStyles()">This div's styles are italic, normal weight, and extra large (24px).</div>

NgIf

Indem Sie die NgIf-Direktive an einen truthy Ausdruck binden, können Sie ein Element und dessen Kinder zum DOM-Baum hinzufügen.

<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>

Umgekehrt entfernt das Binden an einen falsy Ausdruck das Element und seine Kinder aus dem DOM-Baum. Zum Beispiel:

<!--Weil der Wert von isActive false ist, ist User Detail nicht im DOM-Baum enthalten.--> <user-detail *ngIf="isActive"></user-detail>

NgSwitch

Wenn Sie bedingt einen Elementbaum aus einer Menge möglicher Elementbäume anzeigen müssen, wird NgSwitch benötigt. Angular fügt nur das ausgewählte Element zum DOM hinzu. Zum Beispiel:

<span [ngSwitch]="userName"> <span *ngSwitchCase="'Zhang San'">Zhang San</span> <span *ngSwitchCase="'Li Si'">Li Si</span> <span *ngSwitchCase="'Wang Wu'">Wang Wu</span> <span *ngSwitchCase="'Zhao Liu'">Zhao Liu</span> <span *ngSwitchDefault>Long Da</span> </span>

Das [directive], das als übergeordnete Direktive dientNgSwitchist an einen Ausdruck gebunden, der den Switch-Wert zurückgibt. Im Beispiel ist dieser Wert ein String, er kann jedoch ein Wert jedes beliebigen Typs sein. Die übergeordnete DirektiveNgSwitchsteuert eine Gruppe von<span>untergeordneten Elementen. Jedes<span>ist entweder an einen Ausdruck mit einem übereinstimmenden Wert gebunden oder als Standardfall markiert. Zu jedem Zeitpunkt wird höchstens eines dieser span-Elemente im DOM angezeigt. Wenn der übereinstimmende Wert dieses span-Elements gleich dem Switch-Wert ist, fügt Angular 2 dieses<span>span-Element zum DOM hinzu. Wenn kein span-Element übereinstimmt, fügt Angular 2 das Standard-span-Element zum DOM hinzu. Angular 2 entfernt und zerstört alle anderen span-Elemente.

Drei zusammenarbeitende Direktiven:

  • ngSwitch: an einen Ausdruck gebunden, der den Switch-Wert zurückgibt
  • ngSwitchCase: an einen Ausdruck gebunden, der den übereinstimmenden Wert zurückgibt
  • ngSwitchDefault: ein Attribut, das verwendet wird, um das Standardelement zu markieren*, sollte aber stattdessen die Eigenschaftsbindung (Property Binding) verwenden, während ngSwitchCase und ngSwitchDefault vorangestellt werden sollte*。

NgFor

Diese Direktiva wird benötigt, wenn Sie eine aus mehreren Elementen bestehende Liste anzeigen müssen. Wie im folgenden Beispiel wird NgFor auf einen HTML-Block angewendet.

<div *ngFor="let user of users">{{user.fullName}}</div>

NgFor kann auch auf ein Komponentenelement angewendet werden, z. B.:

<user-detail *ngFor="let user of users" [user]="user"></user-detail>

Die ngFor-Direktive unterstützt einen optionalen Index, der während der Iteration von 0 bis zur Länge des Arrays ansteigt.

Dieser Index kann über eine Template-Eingabevariable erfasst und im Template verwendet werden. Das folgende Beispiel erfasst den Index in einer Variablen namens i.

<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>

NgForTrackBy

Die ngFor-Direktive kann manchmal eine schlechte Leistung aufweisen, insbesondere bei großen Listen. Eine kleine Änderung, das Entfernen oder Hinzufügen eines Elements führt zu kaskadierenden DOM-Operationen.

Wenn Sie beispielsweise die Kontakte durch erneutes Abrufen vom Server aktualisieren, enthält die aktualisierte Liste möglicherweise viele (wenn nicht alle) Kontakte, die zuvor angezeigt wurden. Was Angular betrifft, so weiß es jedoch nicht, welche zuvor existierten, sodass es nur die alte Liste löschen, diese DOM-Elemente verwerfen und eine neue Liste mit neuen DOM-Elementen neu aufbauen kann.

Um dieses Problem zu lösen, können Sie eine Tracking-Funktion verwenden, um diesen Aufwand zu vermeiden. Die Tracking-Funktion teilt Angular mit: Wir wissen, dass zwei Objekte mit demselben user.id derselbe Kontakt sind. Zum Beispiel:

trackByUsers(index: number, user: User){return user.id}

Legen Sie dann die NgForTrackBy-Direktive auf diese Tracking-Funktion fest:

<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>

Die Tracking-Funktion verhindert nicht alle DOM-Änderungen. Wenn sich die Eigenschaft ändert, die verwendet wird, um festzustellen, ob es sich um denselben Kontakt handelt, wird das DOM-Element aktualisiert; andernfalls wird dieses DOM-Element unverändert gelassen. Die Listenoberfläche wird flüssiger und reagiert schneller.

Vorlagen-Referenzvariablen

Template-Referenzvariablen sind Referenzen auf DOM-Elemente oder Direktiven im Template.

Sie können für native DOM-Elemente und für Angular-Komponenten verwendet werden – tatsächlich funktionieren sie mit jeder benutzerdefinierten Webkomponente.

Wir können auf Template-Referenzvariablen desselben Elements, von Geschwisterelementen oder beliebigen untergeordneten Elementen verweisen.

Hier sind zwei Beispiele für das Erstellen und Verwenden von Template-Referenzvariablen:

<!--phone verweist auf das Eingabeelement und übergibt `value` an den Event-Handler--> <input #phone placeholder="Telefonnummer"> <button (click)="callPhone(phone.value)">Anrufen</button> <!--fax verweist auf das Eingabeelement und übergibt `value` an den Event-Handler--> <input ref-fax placeholder="Faxnummer"> <button (click)="callFax(fax.value)">Fax</button>

Das Präfix (#) von „phone“ bedeutet, dass wir eine Variable namens phone definieren werden.

Weitere Erweiterungen