在子模块中使用来自导入模块的组件

Posted 2023-03-13

【中文标题】在子模块中使用来自导入模块的组件

【英文标题】：Using component from imported module inside of child modules

【发布时间】：2018-01-22 15:12:03

【问题描述】：

我有一个导出组件以将其公开给其他模块的模块，我想在作为另一个模块的子模块的模块中使用此组件，我正在导入父模块中的第一个模块以启用子模块内部的使用但是，我并不完全相信这是最好的方法。

这是我在根文件夹中的共享模块，其中包含我要使用的组件：

app/shared/shared.module.ts

import dtComponent from './dt.component';

@NgModule(
  imports: [
    CommonModule
  ],
  exports: [
    dtComponent
  ],
  declarations: [
    dtComponent
  ]
)
export class DatePModule 

我在 app 文件夹中有另一个模块，它像这样导入 DatePModule：

app/contacts/contacts.module.ts

import DatePModule from '../shared/shared.module.ts';

@NgModule(
  imports: [
    CommonModule,
    DatePModule
  ]
)
export class CTModule 

我需要在CTModule的某些组件中直接使用dtComponent，但在CTModule子模块中的其他组件中也需要该组件>.

我可以在 CTModule 的子模块中再次导入 DatePModule，但我不相信这是最好的方法。

app/contacts/other/other.module.ts

import DatePModule from '../../shared/shared.module.ts';

@NgModule(
  imports: [
    CommonModule,
    DatePModule
  ]
)
export class OtherModule 

我的问题是，为什么我需要再次导入 DatePModule 如果已经在父模块中导入？如果我在 OtherModule 中删除此导入，则组件 dtComponent 不会被识别为模块的一部分。

【问题讨论】：

你使用延迟加载吗？

@Maximus 是的，我正在使用延迟加载来加载所有模块和组件

好吧，我的回答还是有道理的，共享和延迟加载的模块将在合并过程中被合并和封装解决

【参考方案1】：

为什么我需要再次导入 DatePModule 如果已经导入 父模块

相互导入的模块之间没有层次结构。所有模块都合并到一个包含所有组件的模块定义工厂中。如果你使用延迟加载，同样适用。延迟加载模块和共享模块将被合并，它们之间将没有层次结构。

要了解更多信息，请阅读Avoiding common confusions with modules in Angular。这是报价：

关于模块中imports 的最大困惑是 开发人员认为它构成了层次结构。这可能是合理的 假设导入其他模块的模块成为父模块 用于其导入的模块。然而，事实并非如此。所有模块 在编译阶段合并。因此非延迟加载的模块 不要创建任何层次结构。

但是，模块imports/exports 可以在编译期间强制执行可声明类型封装。如果要使用来自另一个模块的可声明类型，则必须显式导入此模块或重新导出所需模块的其他模块。编译器在解析模板时控制封装，显式导入提供上下文以了解某些组件可以用作模板中的子组件。

我可以在子模块中再次导入 DatePModule CTModule 但我不认为这是最好的方法。

如果您想在 OtherModule 中使用来自 DatePModule 的可声明类型，这是正确的方法。