从模块中导出的 Angular 组件在另一个模块中无法使用

Question

我正在我的 AppModule 中导出一个自定义组件，但不能在另一个模块中使用它，该模块正在 AppModule 中导入。我认为导出的组件是全局可见的？

我正在尝试在 TestModule 的组件中使用带有选择器“app-calendar”的 CalendarComponent。

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

测试模块.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

测试组件.html

<app-calendar></app-calendar>

控制台抛出“app-calendar”不是已知元素（不是模块的一部分）的错误

我错过了什么？

Answer 1

创建CalendarModule或添加Calendar组件到您的共享模块（取决于您的架构），例如：

日历.module.ts

@NgModule({
  declarations: [CalendarComponent],
  exports: [CalendarComponent]
})
export class CalendarModule {}

在AppModule删除CalendarComponent无处不在，进口CalendarModule（或SharedModule）如果一些声明的用途CalendarComponent

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,  <== remove it
  ],
  imports: [
    TestModule,
    // import CalendarModule here if any of declarations above use CalendarComponent in their template
  ],
  exports: [ ...
    CalendarComponent,  // remove it
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

测试模块.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ 
    CalendarModule <=== add this, so TestComponent will be able to use CalenderComponent in its template
  ]
})
export class TestModule {}

有关更多详细信息，请参阅

• Angular 2 使用来自另一个模块的组件