angular - 组件由多个 NgModule 声明

Question

所以我创建了一个组件 示例组件 并在 的模块中声明它不是在 app.module 中列出。
接下来我要声明组件 示例组件 在一个模块中 是 在 app.module 中列出。我该怎么做呢？如果我简单地声明它，我会收到以下错误:组件 示例组件 由多个 NgModule 声明。
abc.module.ts

import { ExampleComponent} from '../Example/Example.component';
@NgModule({
  declarations: [
    ExampleComponent
  ]
})

app.module.ts

import { NewModule} from '../new/new.component';
@NgModule({
  imports: [
    NewModule
  declarations: [
    
  ]
})

新模块

import { ExampleComponent} from '../Example/Example.component';
    @NgModule({
      declarations: [
        ExampleComponent
      ]
    })

Answer 1

如果您在多个模块中使用您的组件，则意味着该组件是共享的。
您需要为您的 ExampleModule 创建一个专属模块 ( ExampleComponent ) , 然后将该模块导入到任何你想使用的地方 ExampleComponent .
所以创建 ExampleModule:

import { NgModule } from '@angular/core';
import { ExampleComponent} from '../Example/Example.component';
@NgModule({
  declarations: [
    ExampleComponent,
  ],
  exports: [
    ExampleComponent,
  ]
})
export class ExampleModule { }

然后导入到你想使用的地方 ExampleComponent (到 abc module 和 app module )像这样:

import { ExampleModule } from '../example.module';
@NgModule({
  imports: [
    ExampleModule 
  ]
  ...
})

通过为共享组件定义单独的模块，您提供了一些封装层，您可以在其中描述和提供组件工作所需的所有依赖项，因此，将来所有消费者只需要导入模块本身而无需了解有关所有这些依赖项的任何信息。