Eine Erklärung der Angular-Vorlagensyntax

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>

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>

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>

Entspricht

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

Der Wert des Eingabeattributs ist eine Variable

<show-title [title]="someTitle"></show-title>

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>

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">

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>

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

Für config/index.js in vue : Detaillierte Erklärung der Konfiguration

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!