Angular 7将导入的模块传递到功能模块 [英] Angular 7 Pass Imported Module to Feature Module

问题描述

我在Angular 7应用程序中具有功能模块的层次结构.其结构如下:

I have a hierarchy of feature modules in an Angular 7 app. It is structured as follows:

• 应用
  • admin(此处导入的UI模块)
    • feature1
    • 功能2
    • app
      • admin (UI module imported here)
        • feature1
        • feature2

        在管理模块中，我已经导入了UI框架模块.我的问题是，如果我的模块是向上"导入的，那是否还意味着Feature1模块中的组件可以访问UI模块，还是我需要在每个功能模块中导入UI模块?我对子"模块有基本的误解吗?

        In the admin module, I have imported a UI framework module. My question is, if my modules are imported "upward", should that also mean that the components in feature1 module have access to the UI module, or do I need to import the UI module in each feature module? Do I have fundamental misunderstanding of "child" modules?

        app.module

        app.module

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        
        import { AppComponent } from './app.component';
        import { AppRoutingModule } from './app-routing.module';
        import { AdminModule } from './modules/admin/admin.module';
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
        
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            BrowserAnimationsModule  ,
            AdminModule,
            AppRoutingModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
        

        admin.module

        admin.module

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { AdminRoutingModule } from './admin-routing.module';
        import { UIFrameworkModule} from '@ui-framework/angular';
        
        import { Feature1Module} from './modules/feature1/feature1.module';
        import { Feature2Module} from './modules/feature2/feature2.module';
        
        @NgModule({
          imports: [
            CommonModule,
            Feature1Module,
            Feature2Module,
            AdminRoutingModule,
            UIFrameWorkModule
          ]
        })
        export class AdminModule {}
        

        feature1.module

        feature1.module

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { Feature1RoutingModule} from './feature1-routing.module';
        
        @NgModule({
          imports: [
            CommonModule,
            Feature1RoutingModule
          ]
        })
        export class Feature1Module {}
        

        推荐答案

        您可以有多个模块-但问题是如何在单个导入数组中将模块导入所有模块-模块的主要作用是分离

        You can have as many modules - but the question is how to import a module to all the module in a single import array - there comes the main act of module separation

        创建一个新模块作为共享模块，如果没有问题，则该模块不包含任何组件或指令-该模块应该是导入所有通用模块的模块

        Create a new module as shared module this module doesn't hold any components or directives if it has any not an issue - this module should be the module that imports all your common module

        在您的情况下UIFrameWorkModule，这是您要在功能模块和管理模块中访问的通用模块，如果是这种情况，请创建一个共享模块并导入此模块，然后像下面的代码一样导出该共享模块

        In your case UIFrameWorkModule this is the common module that you want to access both in feature and admin module if that is the case create a shared module and import this module and export that shared module like the code below

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { UIFrameworkModule } from '@ui-framework/angular';
        
        @NgModule({
          imports: [
            CommonModule,
            UIFrameworkModule 
          ],
          exports:[UIFrameworkModule]
        })
        export class SharedModule {}
        

        现在，此共享模块包含UIFrameworkModule并也导出相同的模块-您只需将共享模块导入任何需要的地方，即可将UIFrameworkModule带到导入的模块

        Now this shared module holds the UIFrameworkModule and export the same module too - You have to just import this shared module where ever you want that will bring the UIFrameworkModule to the imported module

        admin.module

        admin.module

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { AdminRoutingModule } from './admin-routing.module';
        import { UIFrameworkModule} from '@ui-framework/angular';
        
        import { Feature1Module} from './modules/feature1/feature1.module';
        import { Feature2Module} from './modules/feature2/feature2.module';
        
        @NgModule({
          imports: [
            CommonModule,
            Feature1Module,
            Feature2Module,
            AdminRoutingModule,
            SharedModule 
          ]
        })
        export class AdminModule {}
        

        feature.module

        feature.module

        import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { Feature1RoutingModule} from './feature1-routing.module';
        
        @NgModule({
          imports: [
            CommonModule,
            Feature1RoutingModule,
            SharedModule 
          ]
        })
        export class Feature1Module {}
        

        我刚刚将共享模块导入到两个模块中，就像明智的做法一样，您可以将所有通用模块移至共享模块-希望对您有所帮助-感谢开心的编码！

        I have just imported the shared module in both the modules like wise you can move all your common module to the shared modules - hope this helps - Thanks happy coding !!

        这篇关于Angular 7将导入的模块传递到功能模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！