web-dev-qa-db-fra.com

Hériter des importations du module parent vers le module enfant dans Angular2

J'ai fait une application Angular2 comme décrit ici . Il a deux composants (A, B) qui sont importés par le global app.module. Mon idée était d'inclure des modules partagés dans app.module, donc je n'ai pas besoin de gâcher chaque module avec du code redondant. Je veux le faire par exemple avec le FormsModule. Donc, dans le app.module J'ai

imports: [
    UniversalModule,
    CommonModule,
    FormsModule,
    AModule
    RouterModule.forRoot([])
],

exports: [FormsModule]

Mais dans le module A, j'ai eu l'exception Can't bind to 'ngModel' since it isn't a known property of 'select'. qui semble provoqué par le FormsModule manquant. Cela ne fonctionne que lorsque j'importe également le FormsModule dans chaque module enfant en utilisant imports: [FormsModule]. C'est exactement ce que je veux éviter.

Selon cette question , j'ai essayé d'importer le AppModule dans le module enfant A. Cela ne fonctionne pas et me donne l'exception Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

Comment puis-je hériter des importations vers des modules enfants? J'en ai aussi besoin pour les tuyaux.

angularsingle-page-applicationangular2-modules
12
Lion

Créez simplement un module de fonctionnalité (ou module partagé) qui exporte les composants, les directives et les canaux, qui sont généralement utilisés ensemble et importez ce module dans les modules où vous souhaitez utiliser l'un d'entre eux.

Il n'existe aucun moyen de rendre les composants, les directives ou les canaux disponibles à l'échelle mondiale. Ils doivent être ajoutés aux importations de chaque module où ils sont utilisés. Tout ce que vous pouvez faire est de combiner des modules et de les rendre disponibles en important seulement un ou plusieurs modules.

8
Günter Zöchbauer

Il semble que cela ne peut être fait qu'à l'aide d'un module partagé, qui recueille les importations partagées, comme l'a dit @ Günter Zöchbauer. J'ai trouvé n exemple dans les documents officiels , que j'ai utilisé comme base pour créer mon module partagé pour ce faire:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ObjectKeysPipe } from './../shared/pipes/object-keys.pipe';

@NgModule({
    imports: [CommonModule],
    declarations: [
        ObjectKeysPipe
    ],
    exports: [
        CommonModule,
        FormsModule,
        ObjectKeysPipe
    ]
})
export class GlobalSharedModule{}

Cela partage un canal personnalisé de moi (ObjectKeysPipe) et les deux largement utilisés CommonModule et FormModule. L'idée de réduire les dégâts redondants a fonctionné. Dans mes modules d'application, je n'ai pas besoin d'ajouter un tas d'importations/déclarations. Au lieu de cela, j'ai seulement besoin d'importer mon module partagé comme ceci:

import { GlobalSharedModule } from './../shared/global-shared.module';
@ngModule({
    imports: GlobalSharedModule
})
7
Lion