Creare un component con Angular 2

di Stefano Mostarda, in HTML5, Angular 2,

In Angular 2 uno dei concetti principali è quello di component. Un component non è altro che una normale classe, scritta in EcmaScript 6 o in TypeScript o in un altro linguaggio supportato da Angular, che ha in testa un decorator che permette ad Angular 2 di riconoscere la classe.
Scrivere un component è estremamente semplice come possiamo vedere nel prossimo script.

export class MyComponent {

  constructor() { 
    //costruttore;
  }

  MyProperty: string[];

  MyMethod(input: string) { alert(string); }
}

Questa classe dichiara un costruttore, una proprietà di tipo array di stringhe e un metodo che accetta una stringa e la mostra a video. Una volta creata la classe dobbiamo trasformarla in un component per Angular tramite il decorator. Il decorator Component è quello che fa al caso nostro in quanto ci permette di specificare il template da associare alla classe e altre informazioni come un selettore o una direttivacome mostrato nel prossimo esempio.

@Component({
      selector:    'mySelector',
      templateUrl: 'app/mycomponent.html',
      directives:  /*direttiva*/,
})
export class MyComponent { ... }

Una volta aggiunte queste informazioni, ci basta referenziare da una qualunque parte il file relativo al componente e poi possiamo usare la classe come vogliamo.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi