Angular2 – Decorator per costruire e definire lo stile di un componente


In questo articolo, vedremo come realizzare un semplice componente: un template con, al suo interno, l’interpolazione di alcuni valori.

Immaginiamo, di voler creare un semplice componente per rappresentare un brano musicale. Il suo template potrebbe essere, ad esempio, quello che segue:

Music Track HTML Template

Il nostro obiettivo è di creare un componente che viva all’interno del proprio tag HTML, che mostri il template definito e che effettui l’interpolazione dei valori.

I componenti sono il fondamento della applicazioni realizzate con Angular2 e, generalmente, si compongono di due parti:

  • definizione della classe
  • definizione del decorator

Quando si crea un nuovo componente in Angular2, bisogna iniziare dalla sua classe. La classe serve ad instanziare il componente. Inoltre, tutti i dati all’interno del suo template sono accessibili dalle proprietà all’interno del componente stesso.

Music Track Component class

La definizione della classe è realizzata in TypeScript, utilizzando ES6. Quindi, è importante tenere a mente i seguenti punti:

  • la parola chiave export è utilizzata come richiesto dai moduli ES6. La classe MusicTrackComponent si trova nel file music-track.component.ts e può essere importata, all’interno di un altro modulo, usando la parola chiave import. Il path da utilizzare sarebbe del tipo:

import { MusicTrackComponent } from ‘./ music-track.component.ts’

  • le proprietà della classe sono tipicizzate, poiché si utilizza TypeScript
  • tutte le classi ES6 hanno un costruttore. Nel nostro esempio, le proprietà vengono inizializzate al suo interno. Tuttavia, sarebbe possibile anche inizializzare al di fuori. In questo secondo caso, il compilatore TypeScript si prenderebbe l’onere di muovere, automaticamente, la logica all’interno del costruttore, in fase di compilazione

La classe che abbiamo creato contiene le informazioni di cui abbiamo bisogno, ma non può ancora interfacciarsi con il DOM. I decorator ci permettono di fare questo ulteriore passo.

Il simbolo @ messo davanti ad una funzione, sta a significare che quella funzione deve essere usata come un decorator. Per utilizzare il decorator del componente, bisogna prima importarlo dal modulo core di Angular2.

@Component

Il decorator @Component ha come parametro un oggetto ComponentMetadata. In questo esempio, utilizzeremo due proprietà dell’oggetto metatada:

  • selector: è la stringa utilizzata per trovare il componente nel DOM
  • template: è il codice HTML del template, inserito come stringa
selector e template

L’oggetto metadata, del decorator @Component, mette anche a disposizione una proprietà per supportare lo stile da applicare al componente: styles.

styles

La proprità styles viene compilata all’interno di un foglio di stile, applicato solamente a questo componente. In questo modo, non bisognerà preoccuparsi degli altri tag h3 sparsi per l’applicazione. Il foglio di stile generato assicura che solamente questo componente (e i suoi figli) siano soggetti alle regole CSS definite nell’oggetto metadata.

%d bloggers like this: