在 Angular X 中的子模块中使用 AppModule 中的组件（X 代表 2+）

Question

我在我的应用程序的根目录中创建了一个小组件 (LoadingComponent) 并在我的 AppModule 中声明了它（显然）。这个组件在我的应用程序加载时使用，应该显示一些花哨的加载动画。

现在我想在保存内容时在子模块中使用它。但是当我想在另一个模块中使用这个组件时总是会出错。

我在 AppModule 中导出了 LoadingComponent：

import { ButtonsModule } from './buttons/buttons.module';
import { FormsModule } from '@angular/forms';
import { StatusLightsDisplayComponent } from './status-lights-display/status-lights-display.component';
import { StatusLightsContainerComponent } from './status-lights-container/status-lights-container.component';
import { HttpModule } from '@angular/http';
import { ReportsService } from './services/reports.service';
import { BrowserModule } from '@angular/platform-browser';
import { forwardRef, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeneralInformationComponent } from './general-information/general-information.component';
import { TextfieldsComponent } from './textfields/textfields.component';
import { LoadingComponent } from './loading/loading.component';

@NgModule({
  declarations: [
    AppComponent,
    GeneralInformationComponent,
    TextfieldsComponent,
    StatusLightsContainerComponent,
    StatusLightsDisplayComponent,
    LoadingComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ButtonsModule
  ],
  exports: [
    LoadingComponent
  ],
  providers: [
    ReportsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我要使用 LoadingComponent 的模块称为 ButtonsModule。所以我尝试在我的 ButtonsModule 中导入 AppModule。但我收到错误消息：Unexpected value 'undefined' imported by the module 'ButtonsModule'

这是我的按钮模块：

import { AppModule } from '../app.module';
import { LoadingComponent } from '../loading/loading.component';
import { BottomComponent } from './bottom/bottom.component';
import { CalendarComponent } from './top/calendar/calendar.component';
import { CommonModule } from '@angular/common';
import { ExportService } from '../services/export.service';
import { forwardRef, NgModule } from '@angular/core';
import { FunctionsComponent } from './functions/functions.component';
import { NavArrowsComponent } from './shared/nav-arrows/nav-arrows.component';
import { SaveButtonComponent } from './shared/save-button/save-button.component';
import { TopComponent } from './top/top.component';

@NgModule({
  imports: [
    CommonModule,
    AppModule
  ],
  exports: [
    TopComponent,
    FunctionsComponent,
    BottomComponent
  ],
  declarations: [
    TopComponent,
    BottomComponent,
    FunctionsComponent,
    NavArrowsComponent,
    SaveButtonComponent,
    CalendarComponent
  ],
  providers: [
    ExportService
  ]
})
export class ButtonsModule { }

我想你们中的一些人已经认识到这里有些失败了:)但是请读到最后。

我知道这里的最佳做法是创建一个共享模块，然后将其导入我的 AppModule 和 ButtonsModule，但这似乎有点矫枉过正，只是为了这样一个小组件，它也是我在这里唯一的共享模块。它还会产生大量开销。

我的问题：

我是不是做错了什么？如果是，那是什么？
创建共享模块的方法对吗？
为什么我的方法不起作用？我的意思是，在 Angular 的背后是什么阻止了我的方法，为什么？

Answer 1

NgModules help organize an application into cohesive blocks of functionality.

Every Angular app has a root module class. By convention, the root module class is called AppModule and it exists in a file named app.module.ts.

如果导入同一个模块两次怎么办？

That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.

That's true at whatever level A appears in a hierarchy of imported modules. When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports [C, B, A], then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'. When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.

Angular doesn't like modules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.

Link

最后的所有内容都编译成主应用程序模块，并在同一模块中再次导入它，使上述循环依赖条件成立。作为主模块，理想情况下不应有任何导出供其他模块使用。

Answer 2

制作一个组件模块，其唯一的工作就是收集组件，导出它们，然后在两个地方导入它。起初这似乎很痛苦，但后来您意识到它有助于组织在何处使用和扩展的内容。

在 Angular X 中的子模块中使用 AppModule 中的组件（X 代表 2+）

Use component from AppModule in a child module in Angular X (X stands for 2+)

angular-module

angular