我创建了一个小组件（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 in my ButtonsModule。但我收到错误：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 { }
我想你们中的一些人已经认识到这里有些失败:)但是请读到最后。
我知道这里的最佳实践是创建一个共享模块，然后将其导入我的AppModuleand the ButtonsModule，但这似乎有点矫枉过正，对于这么小的组件来说，它也是我在这里唯一的共享模块。它还会产生大量开销。
我的问题：
- 我在这里做错了什么吗？如果是，那是什么？
- 通过创建共享模块是正确的方式吗？
- 为什么我的方法不起作用？我的意思是，在 Angular 的背后是什么禁止了我的方法，为什么？
NgModules 帮助将应用程序组织成有凝聚力的块
功能。
每个 Angular 应用程序都有一个根模块类。按照惯例，根
模块类称为 AppModule，它存在于名为的文件中
应用程序模块.ts。
如果我导入同一个模块两次怎么办？
那不是问题。当三个模块都导入模块'A'时，
Angular 在第一次遇到模块“A”时对它进行一次评估，
并且不再这样做。
无论 A 级出现在导入的层次结构中，情况都是如此。
模块。当模块'B'导入模块'A'，模块'C'导入'B'时，
模块“D”导入[C，B，A]，然后“D”触发评估
“C”，触发“B”的评估，“B”评估“A”。什么时候
Angular 获取“D”中的“B”和“A”，它们已经被缓存并且
准备好出发。
Angular 不喜欢带有循环引用的模块，所以不要让
模块“A”导入模块“B”，模块“B”导入模块“A”。
Link https://angular.io/guide/ngmodule-faq#what-if-i-import-the-same-module-twice
最后的所有内容都会编译到主应用程序模块，并在同一模块中再次导入它，使上述循环依赖条件成立。作为主模块，理想情况下它不应该有任何导出可供其他模块使用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
