时间戳

首页 > 解决方案 > 为什么要将“哑”组件提取到 index.ts ngModule 中？

angular - 为什么要将“哑”组件提取到 index.ts ngModule 中？

问题描述

如果我弄错了术语，请原谅我，我是 Angular 的新手。

为了使下一段有意义，我的理解是容器是一个“智能”组件（您在其中管理数据订阅/观察器等），而其他组件被称为“哑”，因为它们应该做的只是通过@input 显示数据或通过@output 显示信号变化……</p>

因此，有了这种理解，我正在查看官方 @ngrx 示例应用程序，他们正在遵循该模式。然而，我注意到他们使用一个index.ts类似于桶文件的模块来“导出”书籍“哑”组件……我的问题是为什么？这只是一种风格选择吗？回购声明该项目正在展示常见模式和最佳实践，我想更多地了解这一点，但我似乎找不到答案。

也许是一种更好的表达方式，为什么更喜欢导入一个模块（组件）而不是像使用容器一样声明它们？

import { dumbModules } from 'blah...'
import { containerOne } from 'blah...'
import { containerTwo } from 'blah...'

@NgModule ({
 imports: [
  ...,
  dumbModules
 ],
 declarations: [
  ...,
  containerOne,
  containerTwo
 ]
})

VS

import { dumbComponentOne } from 'blah...'
import { dumbComponentTwo } from 'blah...'
import { containerOne } from 'blah...'
import { containerTwo } from 'blah...'

@NgModule ({
imports: [
    ...
],
declarations: [
    ...,
    dumbComponentOne,
    dumbComponentTwo,
    containerOne,
    containerTwo
]
})

还是我还有很多东西要理解，我在这里遗漏了一些明显的东西……</p>

标签： angular

解决方案

在模块中组织组件有几个优点。智能组件和哑组件的分离也是如此。

在谷歌，他们不久前表示每个模块大约有 1.5 个组件。原因是模块可以很容易地重用，而组件则不能。此外，模块可以延迟加载和 treeshaken。

智能组件和哑组件是一种设计模式，可以更容易地重用组件。愚蠢的组件总是可以重复使用，而不必担心副作用或您需要深入了解的奇怪服务。让它们很容易重复使用，意味着您很可能有一天会重复使用它们。

一个组件只能在一个模块中。假设您有功能模块，这意味着您无法跨模块重用功能。这是非常不希望的。但是，一个模块可以导入任意数量的其他模块，并且角度编译器足够聪明，不会在包中包含两次代码。

索引文件使您可以从同一位置导入模块。对库很有用，本质上你的哑组件就是你自己的组件库。

我希望我随机列出的一些原因对您有所帮助...

推荐阅读