Question

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

我有一个组件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的实例。

父级和子级模块之间的角度共享实例不在兄弟之间..

在Angular应用程序中嵌套模块

1 个答案: