使用子模块内导入模块中的组件

时间:2017-08-14 17:57:58

标签: angular angular-components angular-module

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

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

应用/共享/ shared.module.ts

import {dtComponent} from './dt.component';

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

我在app文件夹中有另一个模块,可以像这样导入 DatePModule

应用/联系人/ contacts.module.ts

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

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

我需要在 CTModule 的某些组件中直接使用 dtComponent ,但还需要在 CTModule

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

应用/联系人/其他/ other.module.ts

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

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

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

1 个答案:

答案 0 :(得分:3)

  

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

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

要了解详情,请阅读Avoiding common confusions with modules in Angular。这是引用:

  

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

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

  

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

如果您想在DatePModule内使用OtherModule中的可声明类型,那么这是正确的方法。