Angular 2
Vorlagen

Einführung

Angular 2 Vorlagen

Eine einfache Vorlage

Beginnen wir mit einer sehr einfachen Vorlage, die unseren Namen und unsere Lieblingssache zeigt:

<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>

{}: RENDERING

Um einen Wert zu rendern, können wir die standardmäßige doppelt geschweifte Syntax verwenden:

My name is {{name}}

Pipes, zuvor als "Filter" bekannt, wandeln einen Wert in einen neuen Wert um, z. B. das Lokalisieren einer Zeichenfolge oder das Konvertieren eines Gleitkommawerts in eine Währungsrepräsentation:

[]: VERBINDENDE EIGENSCHAFTEN

Um eine Variable aufzulösen und an eine Komponente zu binden, verwenden Sie die Syntax []. Wenn sich this.currentVolume in unserer Komponente befindet, geben wir dies an unsere Komponente weiter und die Werte bleiben synchron:

<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS

(): BEARBEITEN VON EREIGNISSEN Um auf ein Ereignis auf einer Komponente zu hören, verwenden wir die () -Syntax

<my-component (click)="onClick($event)"></my-component>

[()]: ZWEI-WEGE-DATENBINDUNG

Verwenden Sie die Syntax [()], um die Benutzereingaben und andere Ereignisse auf dem neuesten Stand zu halten. Betrachten Sie es als eine Kombination aus der Verarbeitung eines Ereignisses und der Bindung einer Eigenschaft:

<input [(ngModel)] = "myName"> Der this.myName-Wert Ihrer Komponente bleibt mit dem Eingabewert synchron.

* : DIE ASTERISK

Gibt an, dass diese Direktive diese Komponente als Vorlage behandelt und nicht so wie sie ist gezeichnet wird. Zum Beispiel: ngFor nimmt our und stempelt es für jedes Element in Items ab. Es wird jedoch nie unser ursprüngliches Element dargestellt, da es sich um eine Vorlage handelt:

<my-component *ngFor="#item of items">
</my-component>

Andere ähnliche Anweisungen, die mit Vorlagen arbeiten, als gerenderte Komponenten sind * ngIf und * ngSwitch.