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 模块)
- 功能 1
- 功能2
在管理模块中,我导入了一个 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?
应用模块
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 { }
管理模块
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 belowimport { 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 theUIFrameworkModule
to the imported 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 {}
功能模块
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屋!
- admin(此处导入的 UI 模块)