在Angular应用程序中嵌套模块

Question

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

我有一个组件ImageUploadComponent，打算在多个其他组件中使用。

我创建了一个模块ProductsModule，该模块导入并声明所有与Products相关的组件。

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。

Answer 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在每个导入它的模块中都有一个实例。

父子模块之间的角共享实例，而不是兄弟之间的角共享实例。