Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine Erklärung der Angular-Vorlagensyntax

不言
Freigeben: 2018-07-13 15:00:05
Original
1393 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Erklärung der Angular-Vorlagensyntax vor, die einen bestimmten Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Einführung in die Vorlagensyntax.

1. Interpolationsausdruck

<p>Hello {{name}}</p>
Nach dem Login kopieren
Angular wertet alle -Ausdrücke in doppelten geschweiften Klammern aus, wandelt die Auswertungsergebnisse in Zeichenfolgen um und kombiniert sie mit benachbarten Zeichenfolgen. Literale werden verkettet. Weisen Sie abschließend das kombinierte Interpolationsergebnis dem Attribut des Elements oder der Direktive zu.

Auf der Oberfläche fügen Sie das Ergebnis zwischen den Element-Tags ein und weisen den Tag-Attributen Werte zu. Es ist praktisch, so darüber nachzudenken, und dieses Missverständnis bringt Sie selten in Schwierigkeiten. Aber streng genommen ist das nicht wahr. Interpolationsausdrücke sind eine spezielle Syntax, die Angular in Eigenschaftsbindungen umwandelt.

entspricht

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>
Nach dem Login kopieren

2. Vorlagenausdruck

Vorlagenausdruck erzeugt einen Wert. Angular führt diesen Ausdruck aus und weist ihn der Eigenschaft des Bindungsziels zu, bei dem es sich um ein HTML-Element, eine Komponente oder eine Direktive handeln kann.

Der Wert des Eingabeattributs ist eine Konstante

<show-title title="Some Title"></show-title>
Nach dem Login kopieren

Entspricht

<show-title [title]="&#39;Some Title&#39;"></show-title>
Nach dem Login kopieren

Der Wert des Eingabeattributs ist eine Variable

<show-title [title]="someTitle"></show-title>
Nach dem Login kopieren
Nicht Vergessen Sie die eckigen Klammern. Eckige Klammern weisen Angular an, den Vorlagenausdruck auszuwerten. Wenn Sie vergessen, die eckigen Klammern hinzuzufügen, behandelt Angular den Ausdruck als Zeichenfolgenkonstante und verwendet die Zeichenfolge zum Initialisieren der Zieleigenschaft. Die Zeichenfolge wird nicht ausgewertet.

Vorlagenvariable

Das Schlüsselwort let vor hero erstellt eine Vorlageneingabevariable mit dem Namen hero. Die ngFor-Direktive iteriert über das Heroes-Array, das von der Heroes-Eigenschaft der übergeordneten Komponente zurückgegeben wird, und weist bei jeder Iteration das aktuelle Element aus dem Array der Hero-Variablen zu.
<p *ngFor="let hero of heroes">{{hero.name}}</p>
Nach dem Login kopieren

Vorlagenreferenzvariable

Vorlagenreferenzvariable wird normalerweise verwendet, um auf ein DOM-Element in der Vorlage zu verweisen. Sie kann auch auf Angular-Komponenten oder Anweisungen oder Webkomponenten verweisen. Verwenden Sie das Nummernzeichen (#), um Referenzvariablen zu deklarieren. #phone bedeutet, eine Variable mit dem Namen phone zu deklarieren, um auf das -Element zu verweisen. Auf diese Vorlagenreferenzvariable kann an einer beliebigen Stelle in der Vorlage verwiesen werden.
<input #phone placeholder="phone number">
Nach dem Login kopieren

Template-Anweisung

Template-Anweisung wird verwendet, um auf Ereignisse zu reagieren, die durch Bindungsziele (z. B. HTML-Elemente, Komponenten oder Anweisungen) ausgelöst werden.
<date-picker (dateChanged)="statement()"></date-picker>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie die Angular-UI-Bootstrap-Komponente zum Implementieren von Warnungen

Das obige ist der detaillierte Inhalt vonEine Erklärung der Angular-Vorlagensyntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage