如何在当前模块中使用其他模块的组件？答案

【问题标题】：How can I use the component of the other module in the current module?如何在当前模块中使用其他模块的组件？
【发布时间】：2020-02-27 16:37:00
【问题描述】：

我有两个模块。我需要在对话框中显示组件。但是该组件在其中导入了几个组件（超过 20 个）。因此，如果有一个组件，我会在公共模块中创建。但这更复杂。我尝试从另一个模块导出组件。但这会给我一个错误，因为它没有在这个模块的入口组件中声明。

@NgModule({
declarations: [
    DocumentEditComponent,
    TestimonialLieuComponent,
    CommNetworkAddDialogComponent,
    GoalComponent,
    InterviewGuideComponent,
    JobCommunicationComponent,
    LearningComponent,
    MatchConfigComponent,
    PayDetailComponent,
    PerksAndBenefitsComponent,
    QuestionnaireComponent,
    VendorComponents,
    WorkRelatedComponent,
    ConfigurationComponent,
    BasicInfoComponent,
    AddDialogComponent,
    JdmDetailAddComponent,
    JdmDetailComponentComponent,
    InterviewGuideMapComponent,
    AdminOrgJdmComponent,
    AdminOrgJdmDetailComponent,
    OrgJdmAddComponent,
    OrgInterviewGuideComponent,
    OrgExperienceComponent,
    OrgCommNetworkComponent,
    OrgWorkRelatedComponent

],
exports: [
  TestimonialTemplateComponent,
  TestimonialComponent,
  AdminOrgJdmDetailComponent
],
imports: [
    CommonModule,
    TapCommonModule,
    RecruitmentConfigRoutingModule
],
entryComponents: [
    PhysicaldemandEditOrgComponent,
    InterviewProcessComponent,
    AssessmentsComponent,
    CareerPathComponent,
    DocumentComponent,
    ExperienceComponent,
    GoalComponent,
    InterviewGuideComponent,
    JobCommunicationComponent,
    LearningComponent,
    MatchConfigComponent,
    PayDetailComponent,
    PerksAndBenefitsComponent,
    QuestionnaireComponent,
    VendorComponents,
    WorkRelatedComponent,
    ConfigurationComponent,
    AddDialogComponent,
    JdmDetailAddComponent,
    InterviewGuideMapComponent,
    OrgJdmAddComponent,
    AssessmentOrgAddComponent,
    CareerPathOrgAddComponent,

],
providers: []
})
export class RecruitmentConfigModule {
}

并在对话框中调用组件

openJD(): void {
let dialogRef = this.dialog.open(AdminOrgJdmDetailComponent, {
  width: '80%',
  data: this.jobDescription,
  height: '90%',
  disableClose: true
});
dialogRef.afterClosed().subscribe(result => {

});

}

这会引发错误

VM60232 JobRequisitionAddFormComponent.ngfactory.js:230 错误错误：找不到 AdminOrgJdmDetailComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

任何其他方法来解决这个问题。请告诉我

【问题讨论】：

错误提示该怎么做。 “……你把它添加到@NgModule.entryComponents 了吗？” AdminOrgJdmDetailComponent 需要在入口组件中。
@OneLunchMan 是的，我明白了。但是如果我在我正在使用的两个模块中导入所有组件。我认为这不是正确的方法。可能有解决方案。
评论（和下面的答案）并没有说要导入两个模块中的所有组件。此评论和其他答案是说将其添加到它声明和导出的模块的条目组件中。请参阅文档以获取更多信息。 angular.io/guide/architecture-modules#ngmodule-metadata

标签： angular

【解决方案1】：

您需要将AdminOrgJdmDetailComponent 添加到@NgModule 中的entryComponents 中，如下所示：

例子：

entryComponents: [
    PhysicaldemandEditOrgComponent,
    InterviewProcessComponent,
    AssessmentsComponent,
    CareerPathComponent,
    DocumentComponent,
    ExperienceComponent,
    GoalComponent,
    InterviewGuideComponent,
    JobCommunicationComponent,
    LearningComponent,
    MatchConfigComponent,
    PayDetailComponent,
    PerksAndBenefitsComponent,
    QuestionnaireComponent,
    VendorComponents,
    WorkRelatedComponent,
    ConfigurationComponent,
    AddDialogComponent,
    JdmDetailAddComponent,
    InterviewGuideMapComponent,
    OrgJdmAddComponent,
    AssessmentOrgAddComponent,
    CareerPathOrgAddComponent,
    AdminOrgJdmDetailComponent //<-- here

],

【讨论】：

正在调用的函数在另一个模块中。因此，如果我添加其他组件，它不会造成任何差异。
如果您遇到问题。如果你建议我任何其他方式会很有帮助。
然后尝试导出子模块中使用的所有组件，让父模块使用。请使用这两个模块编辑您的代码。
我没听懂你想说什么。

【解决方案2】：

我会尝试将 AdminOrgJdmDetailComponent 添加到 entryComponents 数组中。正如错误所说，在那里找不到它。由于您以动态方式加载它，我认为您必须告诉 Angular 以命令方式加载它。

...
entryComponents: [
    ...
    AdminOrgJdmDetailComponent 
],
...

您可以找到更多信息here。

【讨论】：

我不认为你有问题。有两个不同的模块。我正在另一个模块中调用一个对话框组件。
您是否尝试过将它同时包含在 entryComponents 和 export 数组中？导出将允许您在其他模块中使用，entryComponents 将负责命令式加载。
如果我也可以在另一个模块中导入。但是该单个组件中使用了许多组件。因此，对于使用的每个组件，它都会给我一个错误。
我明白了。也许还有另一种方法，但我不知道。 documentation 表示“对于您未引用的那些（组件），摇树器会从最终代码包中删除这些组件”。如果这些组件只是动态渲染（如在方法调用中），如果没有显式包含在 entryComponents 数组中（和导出数组，因为您在其他模块中使用它们），它们可能会被删除。