Angular 2
mallar

Introduktion

Vinkelformiga 2 mallar

EN ENKEL TEMPLAT

Låt oss börja med en mycket enkel mall som visar vårt namn och vår favoritsak:

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

{}: RENDERING

För att återge ett värde kan vi använda den dubbla lockiga syntaxen:

My name is {{name}}

Rör, tidigare kända som "Filters", omvandlar ett värde till ett nytt värde, som att lokalisera en sträng eller konvertera ett flytande punktvärde till en valutarepresentation:

[]: Bindande fastigheter

För att lösa och binda en variabel till en komponent använder du syntaxen []. Om vi har this.currentVolume i vår komponent, kommer vi att överföra detta till vår komponent och värdena förblir synkroniserade:

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

(): HANTERING AV HÄNDELSER För att lyssna på en händelse på en komponent använder vi syntaxen ()

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

[()]: BINDNING AV DATA MED Två vägar

Använd [()] syntaxen för att hålla en bindande uppdaterad givet användarinmatning och andra händelser. Tänk på det som en kombination av att hantera en händelse och binda en egendom:

<input [(ngModel)] = "myName"> This.myName-värdet för din komponent kommer att förbli synkroniserat med ingångsvärdet.

* : ASTERISKEN

Indikerar att detta direktiv behandlar denna komponent som en mall och inte kommer att rita den som den är. Till exempel tar ngFor ut vårt och stämplar ut det för varje objekt i artiklar, men det gör aldrig vårt initiala eftersom det är en mall:

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

Andra liknande direktiv som fungerar på mallar snarare än återgivna komponenter är * ngIf och * ngSwitch.