将一个组件从模块导入到另一个模块的组件

Question

我使用角度6，我有一个media模块。我想导入MediaComponent（在中导出MediaModule），但出现此错误：

media.module"' has no exported member 'MediaComponent'.

这是MediaModule声明：

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent,
    CommonModule
  ]
})

这是另一个模块声明：

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    EM,
    EditorRoutingModule,
    MediaModule
  ],
  declarations: [ListComponent, CreateComponent, AddimageComponent]
})

从另一个模块中的组件（EditorModule），这是我的导入：

import { MediaComponent } from '@app/views/media/media.module';

我得到了例外。

注意：当我media directive在上的组件中使用EditorModule它时，它将工作文件。例如 <app-media></app-media>显示内容MediaComponent

Answer 1

你需要从 MediaModule 中导出 MediaComponent，Angular 和 JavaScript 是不同的东西。

您已经通过将组件包含在模块的 @NgModule 装饰器的“exports”部分来导出 Angular 意义上的组件，但您还需要export {MediaComponent}在模块文件的末尾添加，以便您import { MediaComponent } from '@app/views/media/media.module';可以工作。

此外，您不应该从您的模块中导出另一个模块 - 您应该从 MediaModule 的“导出”部分中删除“CommonModule”。

所以，改变

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent,
    CommonModule
  ]
})
export class MediaModule {
}

到：

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent
  ]
})
export class MediaModule {
}

export {MediaComponent};

Answer 2

确保media.module.ts导出一个MediaComponent类。

export { MediaComponent } from 'path/to/media.component';