在 Angular 应用程序中嵌套模块答案

【问题标题】：Nesting modules within an Angular app在 Angular 应用程序中嵌套模块
【发布时间】：2016-12-09 17:19:01
【问题描述】：

我正在开发一个开始包含许多组件的应用程序。我想将组件分解成单独的模块，以避免应用模块列出许多组件，并且代码变得杂乱无章。

我有一个组件 ImageUploadComponent，我计划在多个其他组件中使用它。

我创建了一个模块 ProductsModule，它导入并声明了所有与产品特别相关的组件。

import { ProductsComponent }       from './products.component';
import { ProductDetailComponent }  from './product-detail.component';

...

@NgModule({
  declarations: [
      ProductsComponent,
      ProductDetailComponent
  ],
  ...
})
export class ProductsModule { }

在 app.module 中，我同时导入 ProductsModule 和 ImageUploadComponent：

import { ProductsModule } from './products/products.module';
import { ImageUploadComponent } from './shared/image_upload.component';
...
@NgModule({
  declarations: [
    ...
    ImageUploadComponent,
  ],
  imports: [
    ...
    ProductsModule,
  ],
  ...
})
export class AppModule { ... }

但是，ProductsModule 不知道 ImageUploadComponent，因此，尝试在 ProductsComponent 中使用 ImageUploadComponent 会导致错误。

如何在 Angular2 中将我的代码分解为单独的模块，以便可以在所有模块中使用共享组件？

我的 Angular 版本是 2.1.1。

【问题讨论】：

标签： angular module

【解决方案1】：

您必须为ImageUploadComponent 创建一个模块并将其导入AppModule 和ProductsModule。

为了能够在另一个模块中使用组件，您必须导出该组件，例如：

import { ImageUploadComponent } from './shared/image_upload.component';
...
@NgModule({
  declarations: [
    ImageUploadComponent,
  ],
  exports: [
    ...
    ImageUploadComponent, // Here you dispose the component to other modules
  ],
  ...
})
export class ImageUploadModule { ... }

为什么不只在ProductsModule 中加载它？因为如果你不在appModule 中加载它，你最终会在每个导入它的模块中得到一个ImageUploadComponent 的实例。

Angular 在父模块和子模块之间共享实例，而不是在兄弟之间..

【讨论】：