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

Question

我在 Angular 7 应用程序中有一个功能模块层次结构。它的结构如下：

应用
- admin（UI 模块在这里导入）
  - 特征 1
  - 特征2
- public

在管理模块中，我导入了一个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 {}

Answer 1

如果你的childModule在featureModule里面，你不需要单独导入ChildModule，只需要导出属于ChildModule的组件，然后在你的top Module中导入featureModule

Answer 2

你可以拥有尽可能多的模块 - 但问题是如何将一个模块导入到单个导入数组中的所有模块 - 这是模块分离的主要行为

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

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

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 {}

我刚刚在两个模块中导入了共享模块，你可以将所有通用模块移动到共享模块 - 希望这有帮助 - 谢谢编码愉快！！

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

Angular 7 Pass Imported Module to Feature Module

module

angular

angular7