NgModules > API NgModule

Références

L'actualité

Librairie

L'information

Le but de @NgModule

À un niveau élevé, les NgModules sont un moyen d'organiser des applications Angular et ils y parviennent grâce aux métadonnées du décorateur @NgModule. Les métadonnées se divisent en trois catégories :

  • Statique : configuration du compilateur indiquant au compilateur les sélecteurs de directives et l'emplacement dans lequel les directives doivent être appliquées par le biais d'une correspondance de sélecteur. Ceci est configuré via le tableau declarations.
  • Runtime : configuration de l'injecteur via le tableau providers.
  • Composabilité / groupement : Rassembler des NgModules et les rendre disponibles via les tableaux imports et exports.

@NgModule métadonnées

Le tableau suivant résume les propriétés des métadonnées @NgModule.

Propriété Description
declarations Liste des classes ( composants , directives et pipes ) déclarables appartenant à ce module.

Lors de la compilation d'un modèle, vous devez déterminer un ensemble de sélecteurs à utiliser pour déclencher les directives correspondantes.

Le modèle est compilé dans le contexte d'un NgModule (le NgModule dans lequel le composant du modèle est déclaré), qui détermine l'ensemble des sélecteurs à l'aide des règles suivantes :

  • Tous les sélecteurs de directives listés dans `declarations`.
  • Tous les sélecteurs de directives exportés à partir de NgModules importés.

Composants, les directives et les tuyaux doivent appartenir à exactement un module. Le compilateur émet une erreur si vous essayez de déclarer la même classe dans plusieurs modules. Veillez à ne pas déclarer à nouveau une classe importée directement ou indirectement à partir d'un autre module.

providers Une liste des fournisseurs d'injection de dépendance.

Angular enregistre ces fournisseurs auprès de l'injecteur du NgModule. S'il s'agit du NgModule utilisé pour l'amorçage, il s'agit de l'injecteur racine.

Ces services deviennent disponibles pour injection dans tout composant, directive, conduite ou service qui est un enfant de cet injecteur.

Un module chargé paresseux a son propre injecteur, qui est généralement un enfant de l'injecteur racine de l'application.

Les services chargés paresseux sont étendus à l'injecteur du module paresseux. Si un module chargé paresseux fournit également le UserService, tout composant créé dans son contexte (par exemple, par la navigation du routeur) obtient l'instance locale du service, pas l'instance de l'injecteur d'application racine.

Les composants des modules externes continuent à recevoir l'instance fournie par leurs injecteurs.

Pour plus d'informations sur la hiérarchie et la portée des injecteurs, voir Fournisseurs et le Guide DI.
imports Une liste de modules qui devraient être incorporés à ce module. Plié signifie que c'est comme si toutes les propriétés exportées de NgModule importées étaient déclarées ici.

Plus précisément, c'est comme si la liste des modules dont les composants, directives ou tuyaux exportés étaient référencés par les modèles de composant était déclarée dans ce module.

Un modèle de composant peut référencer un autre composant, une directive ou un canal lorsque la référence est déclarée dans ce module ou si le module importé l'a exportée. Par exemple, un composant peut utiliser les directives NgIfet NgForuniquement si le module a importé l'angulaire CommonModule(peut-être indirectement en important BrowserModule).

Vous pouvez importer de nombreuses directives standard à partir de la CommonModule mais certaines directives familières appartiennent à d'autres modules. Par exemple, vous ne pouvez utiliser qu'après avoir importé Angular .[(ngModel)]FormsModule
exports Liste de déclarations (classes de composant , de directive et de canal) pouvant être utilisées par un module d'importation.

Les déclarations exportées constituent l' API publique du module . Un composant d'un autre module peut utiliser ce module UserComponents'il importe ce module et ce module est exporté UserComponent.

Les déclarations sont privées par défaut. Si ce module n'exporte pasUserComponent, seuls les composants de ce module peuvent utiliser UserComponent.

L'importation d'un module ne réexporte pas automatiquement les importations du module importé. Le module 'B' ne peut pas être utilisé ngIfsimplement parce qu'il a importé le module 'A' qui l'a importé CommonModule. Le module 'B' doit s'importer CommonModulelui-même.

Un module peut répertorier un autre module parmi les siens exports, auquel cas tous ses composants publics, directives et canaux sont exportés.

La réexportation rend la transitivité du module explicite. Si le module 'A' réexporte CommonModuleet que le module 'B' importe le module 'A', les composants du module 'B' peuvent l'utiliser ngIfmême si 'B' n'a pas été importé CommonModule.
bootstrap Une liste des composants qui sont automatiquement démarrés.

Habituellement, cette liste ne contient qu'un seul composant, le composant racine de l'application.

Angular peut être lancé avec plusieurs composants d'amorçage, chacun avec son propre emplacement dans la page Web de l'hôte.

Un composant d'amorçage est automatiquement ajouté à entryComponents.
entryComponents Liste des composants pouvant être chargés dynamiquement dans la vue.

Par défaut, une application angulaire a toujours au moins un composant d'entrée, le composant racine, AppComponent. Son but est de servir de point d'entrée dans l'application, c'est-à-dire de l'amorcer pour lancer l'application.

Les composants routés sont également des composants d'entrée, car ils doivent être chargés de manière dynamique. Le routeur les crée et les dépose dans le DOM près de a ‹router-outlet›.

Bien que les composants amorcés et routés soient des éléments d'entrée , vous n'avez pas besoin de les ajouter à la entryComponentsliste d' un module , car ils sont ajoutés implicitement.

Angular ajoute automatiquement des composants dans les bootstrapdéfinitions de module et de route dans la entryComponentsliste.

Cela ne laisse que les composants amorcés à l'aide d'une des techniques impératives, telle ViewComponentRef.createComponent()que non découvrable.

Le chargement de composants dynamiques n'est pas courant dans la plupart des applications autres que le routeur. Si vous devez charger des composants de manière dynamique, vous devez les ajouter entryComponentsvous-même à la liste.

Pour plus d'informations, voir Composants d'entrée.