在Angular 4中的子模块中使用AppModule中的组件

Question

我已经在LoadingComponent我的应用程序的根目录中创建了一个小的component()并且(显然)在我的应用程序中声明了它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

创建一个组件模块，其唯一的工作是收集组件，导出它们，然后在两个地方导入它们。起初这看起来很痛苦，但后来你意识到它有助于组织使用什么、在哪里使用以及如何扩展。