Angular 7 將導入的模塊傳遞給功能模塊

Question

我在 Angular 7 應用程序中有一個功能模塊的層次結構。 它的結構如下：

• 應用程序
  • admin（這里導入的UI模塊）
    • 功能1
    • 功能2
  • 民眾

在管理模塊中，我導入了一個 UI 框架模塊。 我的問題是，如果我的模塊是“向上”導入的，這是否也意味着 feature1 模塊中的組件可以訪問 UI 模塊，還是我需要在每個功能模塊中導入 UI 模塊？ 我對“子”模塊有根本的誤解嗎？

應用模塊

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

功能模塊

    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

您可以擁有盡可能多的模塊 - 但問題是如何將一個模塊導入到單個導入數組中的所有模塊 - 主要是模塊分離

創建一個新模塊作為共享模塊該模塊不包含任何組件或指令，如果它沒有任何問題 - 該模塊應該是導入所有通用模塊的模塊

在您的情況下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帶到導入的模塊

管理模塊

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

我剛剛在兩個模塊中導入了共享模塊，就像你可以將所有通用模塊移動到共享模塊一樣 - 希望這會有所幫助 - 感謝快樂編碼！

Answer 2

如果你的 childModule 在 featureModule 內，則不需要單獨導入 ChildModule，只需導出屬於 ChildModule 的組件，並在你的 top Module 內導入 featureModule