在Angular X的子模块中使用AppModule中的组件(X代表2+) [英] Use component from AppModule in a child module in Angular X (X stands for 2+)

问题描述

我在应用程序的根目录中创建了一个小组件(LoadingComponent)，并在我的AppModule中声明了它(显然).在我的应用程序加载时使用此组件，并应显示一些奇特的加载动画.

I have created a small component (LoadingComponent) in the root of my application and declared it (obviously) in my AppModule. This component is used when my application is loading and should show some fancy loading animations.

现在，当我保存内容时，我想在子模块中使用它.但是，当我想在另一个模块中使用此组件时，总是会遇到错误.

Now I want to use it in a child module when I save something. But I am always getting errors when I want to use this component in another module.

我在我的AppModule中导出了LoadingComponent:

I exported the LoadingComponent in my AppModule:

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'

The module I want to use the LoadingComponent is called ButtonsModule. So I tried to import the AppModule in my ButtonsModule. But I am getting the error: Unexpected value 'undefined' imported by the module 'ButtonsModule'

这是我的ButtonsModule:

Here is my 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 { }

我想你们当中有些人已经意识到这里有些失败:)但是请仔细阅读.

I guess some of you already recognize some fail here :) But please read it to the end.

我知道这里的最佳实践是创建一个共享模块，然后将其导入到我的AppModule和ButtonsModule中，但这似乎有点过大了，对于这么小的组件，它也会成为我唯一的共享模块.这也会产生很多开销.

I know the best practice here would be to create a shared module and then import this in my AppModuleand the ButtonsModule, but this seems to be a little overkill, just for such a small component and it would also be my only shared module here. It would also create a lot of overhead.

我的问题:

• 我在这里做错什么了吗?如果是，那是什么?
• 通过创建共享模块，正确的方法会是这样吗?
• 为什么我的方法行不通?我的意思是，什么使我无法在Angular的支持下进行操作?为什么?

推荐答案

NgModules帮助将应用程序组织为以下内容的内聚块 功能.

NgModules help organize an application into cohesive blocks of functionality.

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

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.

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

那不是问题.当三个模块都导入模块"A"时， Angular第一次遇到模块"A"时，就会对其进行一次评估， 并且不会再这样做.

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.

在导入的层次结构中出现的任何级别A都是如此 模块.当模块"B"导入模块"A"时，模块"C"导入"B"时， 然后模块'D'导入[C，B，A]，然后'D'触发对 "C"触发评估"B"，评估"B"评估"A".什么时候 Angular到达了"D"中的"B"和"A"，它们已经被缓存并且 准备出发.

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不喜欢带有循环引用的模块，所以不要让 模块"A"导入模块"B"，该模块导入模块"A".

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

链接

最后，所有内容都将编译为Main App Module，然后再次将其导入同一模块中，从而使上述条件成为循环依赖.作为主要模块，理想情况下，其他任何模块都不应使用任何导出.

Everything at the end compiles down to the Main App Module and importing it again in same module make the above condition true of circular dependency. And being the main Module it should ideally not have any exports to be used by other Modules.

这篇关于在Angular X的子模块中使用AppModule中的组件(X代表2+)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！