Angular 2
Sjablonen
Zoeken…
Invoering
Sjablonen lijken erg op sjablonen in hoek 1, hoewel er veel kleine syntactische wijzigingen zijn die duidelijker maken wat er gebeurt.
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.