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

Question

我已经在我的应用程序的根目录中创建了一个LoadingComponent件（ 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 。 所以我尝试在我的AppModule中导入ButtonsModule 。 但我收到错误： Unexpected value 'undefined' imported by the module 'ButtonsModule'

这是我的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帮助将应用程序组织成具有凝聚力的功能块。

每个Angular应用程序都有一个根模块类。 按照惯例，根模块类称为AppModule，它存在于名为app.module.ts的文件中。

如果我导入两次相同的模块怎么办？

那不是问题。 当三个模块全部导入模块'A'时，Angular会在第一次遇到模块'A'时评估模块'A'，而不是再次进行模块'A'。

无论A级出现在导入模块的层次结构中，都是如此。 当模块'B'导入模块'A'，模块'C'导入'B'，模块'D'导入[C，B，A]，然后'D'触发'C'的评估，触发评估'B'，评估'A'。 当Angular到达'B'中的'B'和'A'时，它们已经被缓存并准备好了。

Angular不喜欢带循环引用的模块，所以不要让模块'A'导入模块'B'，它导入模块'A'。

链接

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

Answer 2

创建一个组件模块，其唯一的工作是收集组件，然后导出它们，并在两个位置导入它。 起初它似乎很痛苦，但后来你意识到它有助于组织使用的地方和规模。