Angular 2
Modelli

introduzione

Angolare 2 modelli

UN MODELLO SEMPLICE

Iniziamo con un modello molto semplice che mostra il nostro nome e la nostra cosa preferita:

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

{}: RENDERING

Per rendere un valore, possiamo usare la sintassi double-curly standard:

My name is {{name}}

I pipe, precedentemente noti come "Filtri", trasformano un valore in un nuovo valore, come la localizzazione di una stringa o la conversione di un valore a virgola mobile in una rappresentazione di valuta:

[]: PROPRIETÀ VINCOLANTI

Per risolvere e associare una variabile a un componente, utilizzare la sintassi []. Se nel nostro componente abbiamo this.currentVolume, lo passeremo al nostro componente e i valori rimarranno sincronizzati:

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

(): MANEGGIARE EVENTI Per ascoltare un evento su un componente, usiamo la sintassi ()

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

[()]: BINDING DI DUE-WAY DATA

Per mantenere aggiornato l'associazione in base all'input dell'utente e ad altri eventi, utilizzare la sintassi [()]. Pensala come una combinazione di gestione di un evento e associazione di una proprietà:

<input [(ngModel)] = "myName"> Il valore this.myName del componente rimarrà sincronizzato con il valore di input.

* : L'ASTERISCO

Indica che questa direttiva considera questo componente come un modello e non lo disegna così com'è. Ad esempio, ngFor prende il nostro e lo timbra per ogni oggetto negli articoli, ma non rende mai il nostro iniziale poiché è un modello:

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

Altre direttive simili che funzionano su modelli piuttosto che su componenti renderizzati sono * ngIf e * ngSwitch.