Angular 7将导入的模块传递到功能模块

时间:2018-11-07 05:10:00

标签: angular module angular7

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

  • 应用
    • admin(此处导入了UI模块)
      • feature1
      • 功能2
    • 公开

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

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

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Feature1RoutingModule} from './feature1-routing.module';

@NgModule({
  imports: [
    CommonModule,
    Feature1RoutingModule
  ]
})
export class Feature1Module {}

2 个答案:

答案 0 :(得分:1)

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

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

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

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带到导入的模块

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Feature1RoutingModule} from './feature1-routing.module';

@NgModule({
  imports: [
    CommonModule,
    Feature1RoutingModule,
    SharedModule 
  ]
})
export class Feature1Module {}

我刚刚将共享模块导入到两个模块中,就像明智的做法一样,您可以将所有公共模块移动到共享模块中-希望对您有所帮助-感谢编写愉快的代码!

答案 1 :(得分:0)

如果您的childModules在featureModule中,则不需要单独导入ChildModules,只需导出属于ChildModule的组件并在顶部模块中导入featureModule