Angular 2
Sjablonen

Invoering

Hoekige 2 sjablonen

EEN EENVOUDIG MALPLAATJE

Laten we beginnen met een zeer eenvoudige sjabloon die onze naam en ons favoriete ding toont:

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

{}: RENDERING

Om een waarde weer te geven, kunnen we de standaard dubbele krullende syntaxis gebruiken:

My name is {{name}}

Pijpen, voorheen bekend als "Filters", transformeren een waarde in een nieuwe waarde, zoals het lokaliseren van een string of het omzetten van een drijvende-kommawaarde in een valuta-weergave:

[]: BINDENDE EIGENSCHAPPEN

Gebruik de syntaxis [] om een variabele op te lossen en aan een component te binden. Als we this.currentVolume in onze component hebben, geven we dit door aan onze component en blijven de waarden synchroon:

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

(): BEHANDELING VAN GEBEURTENISSEN Om te luisteren naar een gebeurtenis op een component, gebruiken we de syntaxis ()

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

[()]: BINDING MET TWEE WEGEN

Gebruik de syntaxis [()] om een binding actueel te houden, gegeven gebruikersinvoer en andere gebeurtenissen. Zie het als een combinatie van het afhandelen van een gebeurtenis en het binden van een eigenschap:

<input [(ngModel)] = "myName"> De waarde this.myName van uw component blijft gesynchroniseerd met de invoerwaarde.

* : HET ASTERISK

Geeft aan dat deze richtlijn deze component als een sjabloon behandelt en niet als zodanig zal tekenen. NgFor neemt bijvoorbeeld onze en stempelt het voor elk item in items, maar het geeft nooit onze initiaal weer omdat het een sjabloon is:

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

Andere vergelijkbare richtlijnen die werken op sjablonen in plaats van gerenderde componenten zijn * ngIf en * ngSwitch.