Utiliser le composant d'un autre module

Question

Utiliser le composant d'un autre module

j'ai Angulaire 2 (version 2.0.0 - finale) application générée avec angulaires-cli.

quand je crée un composant et que je l'ajoute au tableau de déclarations de AppModule , tout va bien, ça marche.

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

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 que je rate? Que dois-je faire pour utiliser TaskCardComponent dans BoardComponent ?

117

angular typescript

demandé sur Evgeni Dimitrov 2016-09-20 21:55:29

6 réponses

score 244 · Answer 1

La principale règle ici est que:

les sélecteurs applicables lors de l'élaboration d'un modèle de Composant sont déterminés par le module qui déclare Ce composant, et par la fermeture transitoire des exportations des importations de ce module.

alors, essayez de l'exporter:

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

Que dois-je exporter?

Les classes déclarables à l'exportation que les composants d'autres modules DEVRAIENT être mesure de référence dans leurs modèles. Ce sont vos cours publics. Si vous n'exportez pas une classe, elle reste privée, visible seulement aux autres composant déclaré dans ce module.

à la minute où vous créez un nouveau module, paresseux ou pas, n'importe quel nouveau module et vous déclarez n'importe quoi dedans, ce nouveau module a un état propre (comme Ward Bell a dit dans https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2 )

Angulaire "crée 1519300920" transitive module pour chacun de @NgModule .

ce module recueille les directives qui ont été importées d'un autre module(si le module transitif du module importé a exporté des directives) ou déclarées dans le module actuel .

quand modèle de compilations angulaires qui appartient au module X il est utilisé les directives qui ont été recueillies 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

selon la photo ci-dessus

YComponent ne peut pas utiliser ZComponent dans son modèle parce que directives tableau de Transitive module Y ne contient pas ZComponent parce que YModule n'a pas importé ZModule dont le module transitif contient ZComponent dans exportedDirectives tableau.
dans XComponent modèle nous pouvons utiliser ZComponent parce que Transitive module X a un tableau de directives qui contient ZComponent parce XModule importations module ( YModule ) que les exportations (module ZModule ) que les exportations de la directive ZComponent
dans AppComponent modèle nous ne pouvons pas utiliser XComponent parce que AppModule importations XModule mais XModule n'exporte pas XComponent .

voir aussi

score 25 · Answer 2

Vous avez export de votre NgModule :

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

score 1 · Answer 3

notez que pour créer un" module de fonctionnalités", 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

score 0 · Answer 4

Tout ce que vous voulez utiliser à partir d'un autre module, il suffit de le mettre dans le tableau d'exportation . Comme ceci -

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

score 0 · Answer 5

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 pièce manquante pour réutiliser un composant déclaré dans un Module dans n'importe quel autre module pendant que 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{}

2nd: 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 ceci le deuxième module importe le premier module qui importe et exporte la composante.

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

score 0 · Answer 6

Une grande et bonne approche est de charger le module à partir d'un NgModuleFactory , vous pouvez charger un module à l'intérieur d'un autre module en appelant:

constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {}

loadModule(path: string) {
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
        this.lazyOutlet.createComponent(compFactory);
    });
}

j'ai eu ça de ici .

Las etiquetas más populares

Utiliser le composant d'un autre module

6 réponses