Angular共享模块导出由另一个模块导入的组件

时间:2020-03-26 14:36:46

标签: angular typescript shared-module

我有3个模块。让我们称它们为StoreModuleBookModulePaperModule。商店出售书籍,因此商店使用书籍。书籍由纸张组成,因此使用纸张,与商店使用的纸张完全相同。并且商店也使用纸张。问题来了!现在,用角度来显示现实生活中的示例:

paper.module.ts

import { NgModule } from '@angular/core';
import { PaperComponent } from './paper.component';

@NgModule({
  declarations: [
    PaperComponent
  ],
  exports: [
    PaperComponent
  ]
})
export class PapaerModule { }

到目前为止很好,没有角度误差。

book.module.ts

import { NgModule } from '@angular/core';
import { BookComponent } from './book.component';
import { PaperModule } from './paper.module'

@NgModule({
  declarations: [
    BookComponent
  ],
  imports: [
    PaperModule
  ],
  exports: [
    BookComponent
  ]
})
export class BookModule { }

在这里book.component.html看起来像这样:

<app-paper></app-paper>

一切都很好,没有错误。但是当我们要同时使用两者时(不确定我们是否需要两者,也许我们只需要纸质,也许也需要书):

store.module.ts

import { NgModule } from '@angular/core';
import { BookModule } from './book.module'
import { PaperModule } from './paper.module'

@NgModule({
  imports: [
    BookModule,
    PaperModule
  ]
})
export class StoreModule { }

这是我得到的错误:

错误:未捕获(承诺):错误:类型PaperComponent是以下两个模块的声明的一部分:BookModule和StoreModule!请考虑将PaperComponent移至导入BookModule和StoreModule的更高模块。您也可以创建一个新的NgModule,该NgModule导出并包含PaperComponent,然后在BookModule和StoreModule中导入该NgModule。

为了导出两个组件(BookComponent和PaperComponent),以便如何在其他模块中使用它们,我将如何构造整个结构?我想让PaperComponent也可以被BookModule和Storemodule重用。对于某些模块,我只需要纸,但是对于其他模块,我还需要包括纸的书。希望你能理解我的问题!

1 个答案:

答案 0 :(得分:1)

我只是通过stackblitz运行了您的设置,没问题。

检查您的代码,以确保BookModule没有声明PaperComponent

book.module.ts

import { NgModule } from '@angular/core';
import { BookComponent } from './book.component';
import { PaperModule } from './paper.module';
import { PaperComponent } from './paper.component';

@NgModule({
  declarations: [
    BookComponent,
    // This would be a problem
    PaperComponent
  ],
  imports: [
    PaperModule
  ],
  exports: [
    BookComponent,
  ]
})
export class BookModule { }