Angular 2 Utiliser un composant d’un autre module

J’ai Angular 2 (version 2.0.0 – final) app générée avec des angles angulars.

Lorsque je crée un composant et que je l’ajoute au AppModule de déclarations d’ AppModule , tout va bien, cela fonctionne.

J’ai décidé de séparer les composants, j’ai donc créé un TaskModule et un composant TaskCard . Maintenant, je veux utiliser la TaskCard dans l’un des composants de AppModule (le composant Board ).

AppModule:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { BoardComponent } from './board/board.component'; import { LoginComponent } from './login/login.component'; import { MdButtonModule } from '@angular2-material/button'; import { MdInputModule } from '@angular2-material/input'; import { MdToolbarModule } from '@angular2-material/toolbar'; import { routing, appRoutingProviders} from './app.routing'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { UserService } from './services/user/user.service'; import { TaskModule } from './task/task.module'; @NgModule({ declarations: [ AppComponent, BoardComponent,// I want to use TaskCard in this component LoginComponent, PageNotFoundComponent ], imports: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, MdInputModule, MdToolbarModule, routing, TaskModule // TaskCard is in this module ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { } 

TaskModule:

 import { NgModule } from '@angular/core'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

L’ensemble du projet est disponible sur https://github.com/evgdim/angular2 (dossier kanban-board)

Ce qui me manque Que dois-je faire pour utiliser TaskCardComponent dans BoardComponent ?

La règle principale est que:

Les sélecteurs applicables lors de la compilation d’un modèle de composant sont déterminés par le module qui déclare ce composant et par la clôture transitive des exportations de ce module.

Alors, essayez de l’exporter:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] < == this line }) export class TaskModule{} 

Que dois-je exporter?

Exportez les classes pouvant être déclarées que les composants d'autres modules doivent pouvoir référencer dans leurs modèles. Ce sont vos cours publics. Si vous n'exportez pas une classe, celle-ci rest privée, visible uniquement par les autres composants déclarés dans ce module.

Dès que vous créez un nouveau module, paresseux ou non, tout nouveau module et que vous déclarez quelque chose, ce nouveau module a un état propre (comme l'a dit Ward Bell dans https://devchat.tv/adv-in-angular/119 -aia-évitant-pièges-communs-en-angular2 )

Angular crée un module transitif pour chacun des @NgModule s.

Ce module collecte des directives imscopes depuis un autre module (si le module transitif du module importé a exporté des directives) ou déclarées dans le module en cours .

Lorsque le modèle de compilation angular appartenant au module X est utilisé, il utilise les directives collectées dans X.transitiveModule.directives .

 comstackdTemplate = new ComstackdTemplate( false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives); 

https://github.com/angular/angular/blob/4.2.x/packages/comstackr/src/jit/comstackr.ts#L250-L251

entrer la description de l'image ici

De cette façon selon l'image ci-dessus

  • YComponent ne peut pas utiliser ZComponent dans son modèle car le tableau de directives du Transitive module Y ne contient pas ZComponent car YModule n'a pas importé ZModule dont le module transitif contient ZComponent dans le tableau ZComponent .

  • Dans le modèle XComponent , nous pouvons utiliser ZComponent car le Transitive module X a un tableau de directives qui contient ZComponent car XModule importe le module ( YModule ) qui exporte le module ( ZModule ) qui exporte la directive ZComponent

  • Dans le modèle AppComponent , nous ne pouvons pas utiliser XComponent car AppModule importe XModule mais XModule pas XComponent .

Voir également

  • pourquoi le module chargé paresseux doit-il importer commonModule? Angulaire 2

  • FAQ sur le module angular

  • Quelle est la différence entre les déclarations, les fournisseurs et l'importation dans NgModule

Vous devez l’ export depuis votre NgModule :

 @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

Notez que pour créer un “module de fonctionnalités”, vous devez importer CommonModule . Ainsi, le code d’initialisation de votre module ressemblera à ceci:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], declarations: [ TaskCardComponent ], exports: [ TaskCardComponent ] }) export class TaskModule { } 

Plus d’informations disponibles ici: https://angular.io/guide/ngmodule#create-the-feature-module

Quoi que vous souhaitiez utiliser d’un autre module, placez-le simplement dans le tableau d’exportation . Comme ça-

  @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule] }) 

RÉSOLU COMMENT UTILISER UN COMPOSANT DÉCLARÉ DANS UN MODULE DANS UN AUTRE MODULE.

Basé sur l’explication de Royi Namir (merci beaucoup). Il y a une partie manquante pour réutiliser un composant déclaré dans un module dans tout autre module pendant le chargement différé.

1er: exporter le composant dans le module qui le contient:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] < == this line }) export class TaskModule{} 

2ème: Dans le module où vous voulez utiliser TaskCardComponent:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], providers: [], exports:[ MdCardModule ] < == this line }) export class TaskModule{} 

Comme cela, le deuxième module importe le premier module qui importe et exporte le composant.

Lorsque nous importons le module dans le deuxième module, nous devons l'exporter à nouveau. Nous pouvons maintenant utiliser le premier composant du deuxième module.

Une grande et formidable approche consiste à charger le module depuis une NgModuleFactory , vous pouvez charger un module dans un autre module en appelant ceci:

 constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {} loadModule(path: ssortingng) { this.loader.load(path).then((moduleFactory: NgModuleFactory) => { const entryComponent = (moduleFactory.moduleType).entry; const moduleRef = moduleFactory.create(this.injector); const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent); this.lazyOutlet.createComponent(compFactory); }); } 

Je l’ai eu d’ ici .