正确导入嵌套模块和依赖项

Question

好的，这是问题所在。我有一个父模块，它导入我想要与父模块中的嵌套模块共享的共享组件。父模块如下所示：

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TableComponent } from './forms/table/table.component';
import { RadioComponent } from './forms/radio/radio.component';
import { InputComponent } from './forms/input/input.component';
import { BrandingModule } from "./branding/branding.module";
import { RowComponent } from './grid/row/row.component';
import { ColumnComponent } from './grid/column/column.component';
import { TilesComponent } from './grid/tiles/tiles.component';
import { CTAComponent } from "./cta/cta.component";
import { ModalComponent } from "./modal/modal.component";
import { TextHeaderComponent } from "./text-header/text-header.component";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrandingModule
  ],
  declarations: [
    TableComponent, 
    RadioComponent,
    InputComponent,
    RowComponent,
    ColumnComponent,
    TilesComponent,
    CTAComponent,
    ModalComponent,
    TextHeaderComponent
  ],
  exports: [
    TableComponent, 
    RadioComponent,
    InputComponent,
    BrandingModule,
    RowComponent,
    ColumnComponent,
    TilesComponent,
    CTAComponent,
    ModalComponent,
    TextHeaderComponent
  ]
})
export class SharedModule {}

现在问题始于这样一个事实：在那里抛出了一个包含所有这些组件的模块。这是品牌模块。这就是品牌模块的样子：

品牌模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InMemoryWebApiModule } from "angular2-in-memory-web-api";

import { BrandingService } from "./services/branding.service";
import { BrandingApi } from "./api/branding.api";

import { HeaderModule } from "./header/header.module";
import { FooterModule } from "./footer/footer.module";

@NgModule({
    imports: [
        CommonModule,
        HeaderModule,
        FooterModule,
        InMemoryWebApiModule.forRoot(BrandingApi)
    ],
    declarations: [
    ],
    exports: [
        HeaderModule,
        FooterModule
    ],
    providers: [
        BrandingService
    ]
})

export class BrandingModule {

}

正如您所看到的，此模块实际上是导入了两个嵌套模块HeaderModule和FooterModule。

以下是这些：

标题模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HeaderComponent } from "./header.component";
import { ButlerBarComponent } from './butler/butler.component';
import { BannerComponent } from "./banner/banner.component";
import { NavigationComponent } from "./navigation/navigation.component";

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [
        HeaderComponent,
        ButlerBarComponent,
        BannerComponent,
        NavigationComponent
    ],
    exports: [
        HeaderComponent,
        ButlerBarComponent,
        BannerComponent,
        NavigationComponent
    ],
    providers: []
})

export class HeaderModule {}

页脚模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { FooterComponent } from "./footer.component";
import { ButlerBarComponent } from './butler/butler.component';
import { NavigationComponent } from "./navigation/navigation.component";
import { LocationFinderComponent } from "./location-finder/location-finder.component";
import { SubNavigationComponent } from "./sub-navigation/sub-navigation.component";
import { DisclaimerComponent } from "./disclaimer/disclaimer.component";
import { SubFooterComponent } from "./sub-footer/sub-footer.component";

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [
        FooterComponent,
        ButlerBarComponent,
        NavigationComponent,
        LocationFinderComponent,
        SubNavigationComponent,
        DisclaimerComponent,
        SubFooterComponent
    ],
    exports: [
        FooterComponent,
        ButlerBarComponent,
        NavigationComponent,
        LocationFinderComponent,
        SubNavigationComponent,
        DisclaimerComponent,
        SubFooterComponent
    ],
    providers: []
})

export class FooterModule {}

现在，您将看到这两个模块导入了几个自己的组件，然后向上共享它们以便在实际的AppComponent中使用。但这是我的问题所在。我需要这些嵌套了两个模块的组件，以便能够访问最初在SharedModule中导入的其他组件。

从技术上讲，我应该可以将SharedModule导入FooterModule和HeaderModule，以便他们访问。问题变得那样，因为BrandingModule本身是SharedModule的一部分，它会给出错误Unexpected value 'undefined' imported by the module 'FooterModule'。

我能做些什么让我按照我需要的方式工作吗？

Answer 1

这是循环依赖：

SharedModule想要想要FooterModule的BrandingModule谁想要想要想要使用FooterModule的BrandingModule的SharedModule ...等等什么都没有启动

为什么不创建这些模块都可以指向的辅助模块，而不是像这样创建圆圈？