angular – 了解@NgModule用法

2023年10月20日 200次阅读

这个新的@NgModule废话让我很难过.之前,我能够通过@Component元对象的指令：[]属性干净地指定@Component的指令依赖项.所以：

@Component({ /* ... */ })
export class Cmp1 {}

@Component({ /* ... */ })
export class Cmp2 {}

@Component({
  /* ... */
  directives: [Cmp1]
})
export class Cmp3 {}

@Component({
  /* ... */
  directives: [Cmp2, Cmp3]
})
export class Cmp4 {}

现在,在“方便”的幌子下,我现在必须在一个数组中声明一个包含所有这四个组件的@NgModule,如下所示：

@NgModule({
  declarations: [Cmp1, Cmp2, Cmp3, Cmp4],
  exports: [Cmp4],
  imports: [Cmp1, Cmp2, Cmp3, Cmp4]
})
export class YetAnotherWrapperClass {}

这不会掩盖我的组件的真正依赖图吗？如果我这样做,我怎么知道实际上Cmp3依赖于Cmp1？哦,当然,我会在这里和那里省略一些import语句,但似乎成本正在失去每个组件的显式依赖关系.

我阅读了迁移指南和角度模块指南,但我觉得我从根本上不同意@NgModule设计决策.我错过了什么吗？

最佳答案 引入@NgModule()的目的是允许延迟加载路由器,而不是引入一种不同的方式来声明组件依赖.这只是一个副作用.

确实,您不再获得组件或指令的清晰依赖关系图,但如果将应用程序拆分为每个NgModule的功能(恕我直言)更有意义,则可以获得明确的功能依赖关系图.

导入仅适用于NgModules,不适用于组件或指令.
因此该行无效

进口：[Cmp1,Cmp2,Cmp3,Cmp4]

应该是这样的

进口：[Feature1Module,Feature2Module]

点赞