Angular 2
Modèles
Recherche…
Introduction
Les modèles sont très similaires aux modèles dans Angular 1, même s'il existe de nombreuses petites modifications syntaxiques qui permettent de mieux comprendre ce qui se passe.
Angular 2 Modèles
UN MODÈLE SIMPLE
Commençons par un modèle très simple qui montre notre nom et notre truc préféré:
<div>
Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
{}: RENDU
Pour rendre une valeur, nous pouvons utiliser la syntaxe à double courbe standard:
My name is {{name}}
Les tubes, précédemment appelés «Filtres», transforment une valeur en une nouvelle valeur, comme la localisation d'une chaîne ou la conversion d'une valeur en virgule flottante en une représentation monétaire:
[]: PROPRIÉTÉS DE LIAISON
Pour résoudre et lier une variable à un composant, utilisez la syntaxe []. Si nous avons this.currentVolume dans notre composant, nous le ferons passer à notre composant et les valeurs resteront synchronisées:
<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS
(): GESTION DES ÉVÉNEMENTS Pour écouter un événement sur un composant, nous utilisons la syntaxe ()
<my-component (click)="onClick($event)"></my-component>
[()]: LIAISON DE DONNÉES À DEUX VOIES
Pour conserver une liaison à jour avec les entrées de l'utilisateur et d'autres événements, utilisez la syntaxe [()]. Considérez-le comme une combinaison de gestion d'un événement et de liaison d'une propriété:
<input [(ngModel)] = "myName"> La valeur this.myName de votre composant restera synchronisée avec la valeur d'entrée.
* : L'ASTERISK
Indique que cette directive traite ce composant comme un modèle et ne le dessine pas tel quel. Par exemple, ngFor prend notre et le tamponne pour chaque élément dans les éléments, mais il ne rend jamais notre initiale car il s'agit d'un modèle:
<my-component *ngFor="#item of items">
</my-component>
Les autres directives similaires qui fonctionnent sur les modèles plutôt que sur les composants rendus sont * ngIf et * ngSwitch.