Chargement...

ANGULAR-TUTO.COM

05 Decorateur

05 Decorateur
Décorateurs & Annotations

Dans l'Article precedent on a utilisé à la fois deux décorateurs à savoir "@Component" et "@Injectable" qui sont frequemment utilisés dans les applications Angular2.
En fait, Dans Angular2 les components sont des simples classes sauf si vous ajoutez le bon décorateur qui est "@component". Donc le decorator vous permet de marquer une classe comme un composant Angular2. Aussi dans le component on définit des Metadatas. Ces Metadatas permettent de définir comment ce component doit etre traité, instancié et comment se comporter au cours de l'execution.
Le mot annotaion et decorator ont le meme sens du mot.
@Component est une annotation qui permet de dire à Angular2 que la classe attachée est un component.

Example

 
import {Component} from 'angular2/core'; 
@Component({
selector: 'hello-world',
template:'<h3>Angular 2 Hello World</h3>'
,
})
 
export class Angular2AnnotationsComponent { }
           
Metadatas de l'annotation @Component

Avec le décorateur "@component" on peut utiliser les metadatas suivantes pour definir comment ce component va se comporter.
  • animations - créer des animations pour le component
  • changeDetection - Comment le component se réagit s'il détecte s'il y a un changement sur le modèle
  • encapsulation - Definir la strategie d'encapsulation pour un component. Par example on peut créer un shadow effect autour du component dans la page.
  • entryComponents - La vue du component actuel peut charger un ensemble d'autres components. Donc liste des components chargés implecitement et non pas explecitement.
  • exportAs - Le nom avec lequel le component est exporté vers la template et les autres components.
  • host - Permet de faire le mappage vers un élémement du component père. Ainsi par exemple appliquer un style CSS sur cet élément
  • inputs - Permet de passer des données au component comme input
  • template
  • outputs - Les événements exposables qui seront executés par le component
  • providers - Permet de lister les services utilisés dans ce component
  • ContentChildren - Permet de retourner des elements HTML injectés dans le component créé.
  • selector - Definir la balise HTML qui permet d'appeler le compoenent
  • styleUrls - Si votre CSS est dans un fichier séparer vous pouvez le passer ici
  • styles - Le CSS de votre component
  • template - Le HTML du component
  • templateUrl - Si le HTML de votre component est dans un fichier HTML séparé donc ici vous passer l'URL du HTML
  • viewProviders - liste des providers disponibles