Angular 为什么提取&x201C；哑”；是否将组件转换为index.ts模块？

如果我把术语弄错了，请原谅，我是个新手

为了使下一段有意义，我的理解是，容器是一个“智能”组件（在其中管理数据订阅/观察者等），其他组件被称为“哑”，因为它们所要做的只是通过@input显示数据或通过@output显示信号更改

因此，有了这种理解，我正在查看这些数据，他们正在遵循这种模式。然而，我注意到他们使用

index.ts

通过一个类似桶形文件的模块“导出”图书“哑”组件……我的问题是为什么？这只是一种风格选择吗？回购协议指出，该项目展示了常见模式和最佳实践，我想进一步了解这一点，但似乎找不到答案

也许更好的解释是，为什么导入一个模块（组件）比只声明它们（就像它们对容器所做的那样）更可取

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

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

VS

---

或者我还有很多需要理解的地方，我在这里遗漏了一些明显的东西…

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

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

smart and dumb components是一种设计模式，它使组件更易于重用。哑组件始终可以重用，而不必担心副作用或您需要深入了解的奇怪服务。使它们很容易重用，意味着您很可能会在某一天重用它们

一个组件只能位于一个模块中。假设您有功能模块，这意味着您不能跨模块重用功能。这是非常不受欢迎的。但是，一个模块可以导入到任意多的其他模块中，angular编译器足够聪明，不会在包中包含两次代码

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

---

我希望我随机列出的一些原因对您有一定意义…

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

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

smart and dumb components是一种设计模式，它使组件更易于重用。哑组件始终可以重用，而不必担心副作用或您需要深入了解的奇怪服务。使它们很容易重用，意味着您很可能会在某一天重用它们

一个组件只能位于一个模块中。假设您有功能模块，这意味着您不能跨模块重用功能。这是非常不受欢迎的。但是，一个模块可以导入到任意多的其他模块中，angular编译器足够聪明，不会在包中包含两次代码

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

---

我希望我随机列出的一些原因对您有一定的意义……

我的猜测是，哑组件更可能只是表象，因此在其他地方重复使用。所以在其他地方导入一个完整的模块比较简单。我猜哑组件更可能只是表示性的，因此在其他地方重用。因此，在其他地方导入整个模块更简单。好的，这对我来说很有意义，尤其是“组件库”部分。所以就像流行的角材料组件一样。。。您只需导入它们的“哑”组件，并允许您在多个位置使用它们。对于容器不这样做的原因是重用它们可能会带来副作用。我不知道为什么我不能自己解决这个问题。谢谢你的回答，我会将此标记为已接受。它适用于一个功能模块。一个组件只能声明一个，因此不能在两个模块中声明一个组件。如果可以的话，编译器根本不知道如何优化最终包。但是你可以在两个模块中导入一个模块。这对我来说很有意义，尤其是“组件库”部分。所以就像流行的角材料组件一样。。。您只需导入它们的“哑”组件，并允许您在多个位置使用它们。对于容器不这样做的原因是重用它们可能会带来副作用。我不知道为什么我不能自己解决这个问题。谢谢你的回答，我会将此标记为已接受。它适用于一个功能模块。一个组件只能声明一个，因此不能在两个模块中声明一个组件。如果可以的话，编译器根本不知道如何优化最终包。但您可以在两个模块中导入一个模块。

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

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