Utiliser un composant d'un autre module

Question

J'ai une application Angular 2.0.0 générée avec angular-cli.

Lorsque je crée un composant et que je l'ajoute à AppModule Le tableau des déclarations de l'UE, c'est tout bon, ça marche.

J'ai décidé de séparer les composants, j'ai donc créé une TaskModule et un composant TaskCard . Je veux maintenant utiliser le TaskCard dans l'un des composants de la AppModule (le 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 tableau kanban)

Qu'est-ce que je rate ? Que dois-je faire pour utiliser TaskCardComponent sur BoardComponent ?

Answer 1

La règle principale ici est la suivante :

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 fermeture transitive des exportations des importations de ce module.

Alors, essayez de l'exporter :

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

Qu'est-ce que je dois exporter ?

Exporter des classes déclarables que les composants d'autres modules doivent être d'autres modules doivent pouvoir référencer dans leurs modèles. Ce sont vos classes publiques. Si vous n'exportez pas une classe, elle reste privée, visible uniquement par les autres composants du module. composant déclaré dans ce module.

Dès que vous créez un nouveau module, paresseux ou non, n'importe quel nouveau module, et que vous y déclarez quoi que ce soit, ce nouveau module a un état propre. (comme Ward Bell l'a dit dans https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2 )

Angular crée module transitif pour chacun des éléments suivants @NgModule s.

Ce module collecte les directives qui sont soit importées d'un autre module (si le module transitif du module importé a des directives exportées), soit déclarées dans le module courant. .

Quand angular compile un modèle qui appartient au module X il est utilisé les directives qui avaient été collectées dans X.transitiveModule.directives .

compiledTemplate = new CompiledTemplate(
    false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);

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

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

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

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

• Sur AppComponent nous ne pouvons pas utiliser le modèle XComponent parce que AppModule importations XModule mais XModule n'exporte pas XComponent .

Voir aussi

• pourquoi le module chargé paresseusement doit-il importer commonModule ? Angular 2

• FAQ sur les modules Angular

• Quelle est la différence entre les déclarations, les fournisseurs et les importations dans NgModule ?

Answer 2

Vous devez export de votre NgModule :

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

Answer 3

Notez que pour créer un module dit "de fonctionnalité", vous devez importer CommonModule à l'intérieur. 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

Answer 4

Tout ce que vous voulez utiliser d'un autre module, il suffit de le mettre dans le module tableau d'exportation . Comme ça

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

Answer 5

A 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 manque une partie pour réutiliser un composant déclaré dans un module dans n'importe quel autre module lorsque le chargement paresseux est utilisé.

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 le 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{}

Ainsi, 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. Maintenant nous pouvons utiliser le premier composant dans le second module.