Angulaire 2 Utilisation de composants à partir d'un autre module

La règle principale ici est que:

Les sélecteurs qui sont applicables lors de la compilation d'un modèle de composant sont déterminés par le module qui déclare que composant, et la fermeture transitive des exportations de ce module les importations.

Donc, essayer de l'exporter:

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

Que dois-je exporter?

D'exportation pouvant être déclarés classes de composants dans d'autres modules devraient être
mesure de référence dans leurs modèles. Ce sont vos classes publiques.
Si vous n'exportez pas une classe, il reste privée, visible uniquement par les autres
composant déclaré dans ce module.

La minute où vous créez un nouveau module, paresseux ou pas, tout nouveau module et vous déclarer quelque chose en elle, ce nouveau module a un état de propreté(l'aile de Bell a dit dans https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)

Angulaire crée transitive module pour chacun des @NgModules.

Ce module recueille les directives que soit importé à partir d'un autre module(si transitive module de module importé a exporté des directives) ou déclarées dans le module en cours.

Quand angulaire compile modèle qui appartient à un module X elle est utilisée, ces directives qui avaient é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

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

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

• Dans XComponent modèle, nous pouvons utiliser ZComponent parce que Transitive module X a des directives tableau qui contient ZComponent parce que
  XModule importations module (YModule) que les exportations (module deZModule) que les exportations de la directive ZComponent

• Dans AppComponent modèle on ne peut pas utiliser XComponent parce que AppModule importations XModule mais XModule n'est pas exportations XComponent.

Voir aussi

• pourquoi paresseux chargé module a pour importer commonModule? Angulaire 2

• Angulaire Module Faq

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

(Angulaire 2 - Angulaire 7)

Composant peut être déclarée dans un module unique seulement.
Pour utiliser un composant à partir d'un autre module, vous devez effectuer deux tâches simples:

1. Exporter le composant dans le premier module
2. Importer le premier module, dans le deuxième module

1er Module:

Un composant (appelons cela: "ImportantCopmonent"), nous voulons ré-utilisation dans le 2ème Module de la page.

@NgModule({
declarations: [
    FirstPage,
    ImportantCopmonent //<-- Enable using the component html tag in current module
],
imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),
],
exports: [
    FirstPage,
    ImportantCopmonent //<--- Enable using the component in other modules
  ]
})
export class FirstPageModule { }

---

2ème Module:

Réutilise le "ImportantCopmonent", par l'importation de la FirstPageModule

@NgModule({
declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent
],
imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule //<--- this Imports the source module, with its exports
], 
exports: [
    SecondPage,
]
})
export class SecondPageModule { }

Ce que vous voulez l'utiliser à partir d'un autre module, il suffit de mettre dans le à l'exportation de la matrice de.
Ce

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

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);
    });
}

Je l'ai obtenu à partir de ici.