La technique du SharedModule

Une application Angular possède souvent un SharedModule qui contient les éléments réutilisables de l’application. Comment le créer et comment l’utiliser ?

Créer un SharedModule (composants, directives et pipes réutilisables)

Un SharedModule est un simple module Angular, dont le rôle est de déclarer et exporter tous les composants, directives et pipes susceptibles d’être réutilisés partout dans le projet.

Le nom “SharedModule” est une simple convention, et vous n’êtes pas obligé de créer un tel module dans votre projet.

Le SharedModule contient généralement des éléments d’interface réutilisables (barre de navigation, HTML pour afficher un champ de formulaire ou un tableau…) ou des directives et pipes très génériques.

Exemple de SharedModule :

@NgModule({
  imports: [CommonModule],
  declarations: [NavbarComponent, TableComponent, HighlightDirective, MarkdownPipe...],
  exports: [NavbarComponent, TableComponent, HighlightDirective, MarkdownPipe...]
})
export class SharedModule {}

Utiliser le SharedModule

Tous les autres modules de l’application peuvent ensuite importer le SharedModule pour accéder aux composants, directives et pipes qu’il exporte.

@NgModule({
  imports: [ SharedModule ],  // ModuleA peut maintenant utiliser NavbarComponent, HighlightDirective...
  // ...
})
export class ModuleA {}
@NgModule({
  imports: [ SharedModule ],  // ModuleB peut maintenant utiliser NavbarComponent, HighlightDirective...
  // ...
})
export class ModuleB {}

Inclure des modules réutilisables dans le SharedModule

Le SharedModule peut donc déclarer et exporter des composants, des directives et des pipes. Mais il peut également exporter des modules entiers, ce qui permet aux utilisateurs du SharedModule d’accéder aux fonctionnalités des modules exportés sans devoir les ré-importer explicitement à chaque fois qu’ils en ont besoin.

Supposons que vous vouliez utiliser les directives Angular comme *ngIf et *ngFor ainsi que les syntaxes de formulaires dans tous les modules de votre application. Ces fonctionnalités viennent des modules Angular CommonModule et FormsModule respectivement. Plutôt que de ré-importer ces deux modules à chaque fois que vous en avez besoin, vous pourriez les lister dans les exports du SharedModule.

@NgModule({
  exports: [ CommonModule, FormsModule ]
})
export class SharedModule {}

À présent, tous les modules de votre application qui importent le SharedModule accéderont aux fonctionnalités contenues dans CommonModule et FormsModule sans devoir importer ces modules explicitement.

@NgModule({
  imports: [ SharedModule ],  // ModuleA peut maintenant utiliser *ngIf, *ngFor, ngModel...
  // ...
})
export class ModuleA {}
Informations

Tags : ngmodule

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne