组件是Angular中2个模块的声明的一部分

Question

我创建了一个名为commonmod.component.ts的组件，该组件包含在其他两个模块（abc和def）中。

abc.module.ts

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

def.module.ts

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

当我将abc模块中的一页重定向到def模块中的另一页时，它使我跟随以下错误。

错误错误：未捕获（承诺）：错误：类型commonmod是2个模块的声明的一部分：abcand def！请考虑将commonmod移至导入abc和def的更高模块。您还可以创建一个新的NgModule，以导出并包括commonmod，然后在abcand def中导入该NgModule。错误：类型commonmod是2个模块的声明的一部分：abc和def！请考虑将commonmod移至导入abcand def的更高模块。您还可以创建一个新的NgModule，将其导出并包括commonmod，然后在abc和def中导入该NgModule。

Answer 1

一个组件只能在一个模块中声明。如果您尝试在多个模块中声明它，则会收到此错误

错误：类型...是2个（或更多）模块的声明的一部分：

解决这个问题的方法非常简单。如果需要在多个模块中使用组件，则将其添加到声明该模块的模块的导出数组中。

因此，可以说我们有一个名为GreetingsComponent的组件，该组件在模块TestModule中声明，我想在AppModule中声明的AppComponent中使用它。我将像这样将其添加到TestModule的exports数组中

import {NgModule} from '@angular/core';
import {GreetingComponent} from './greeting.component';
@NgModule({
declarations:[GreetingComponent],
exports:[GreetingComponent]
})
export class TestModule
{
}

现在，作为的AppModule已进口 TestModule而这样一来所有的结构是否组件，指令，管道等属于在出口阵列中的TestModule应自动提供给的AppModule。

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {TestModule} from './test.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, TestModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

现在，您只需在AppComponent中使用GreetingsComponent

  <greetings></greetings>

这里工作的StackBlitz。

干杯。

Answer 2

消息很清楚：您不能在多个模块中声明一个组件。如果两个模块都需要它，则需要在第三个模块中声明/导出您的组件，然后将其导入abc＆def中。

@NgModule({
  imports:      [ MainModule ]
})
export class AbcModule { }

@NgModule({
  imports:      [ MainModule ]
})
export class DefModule { }

@NgModule({
  declarations: [ CommonMod ],
  exports:    [ CommonMod ]
})
export class MainModule { }