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。所以我尝试在我的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应用都有一个根模块类。按惯例，根   module类称为AppModule，它存在于一个名为的文件中   app.module.ts。

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

这不是问题。当三个模块全部导入Module＆＃39; A＆＃39;时，   Angular评估模块＆＃39; A＆＃39;曾经，它第一次遇到它，   并且不会再这样做了。

在任何等级A中出现的情况都是真实的    模块。当模块＆＃39; B＆＃39;进口模块＆＃39; A＆＃39;，模块＆＃39; C＆＃39;进口＆＃39; B＆＃39;，    和模块＆＃39; D＆＃39;进口[C，B，A]，然后＆＃39; D＆＃39;触发评估    ＆＃39; C＆＃39;，触发评估＆＃39; B＆＃39;，评估＆＃39; A＆＃39;。什么时候    Angular进入了B＆＃39;和＆＃39; A＆＃39;在＆＃39; D＆＃39;中，他们已经缓存了    准备好了。

Angular并不喜欢带有循环引用的模块，所以不要这样做    模块＆＃39; A＆＃39;导入模块＆＃39; B＆＃39;，导入模块＆＃39; A＆＃39;。

Link

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

Answer 2

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

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

2 个答案: