Angular 角度4：组件化HTML和将变量传递给相关同级之间的反向关系？

我想知道我是不是想错了

我认为在一个HTML页面上创建尽可能多的子组件是一个好的实践

以这个案例为例：

StuffComponent被重构为以下集合的组件：{StuffFilterPanelComponent，StuffContentDisplayComponent}

根据过滤器面板部分中指定的过滤器，设置某些布尔值/标志，用于有条件地修改StuffContentDisplayComponent中的显示方式

然而，由于filter panel部分是“stuffContentDisplay”的同级组件，因此我将使用服务和EventEmitter使ContentDisplay了解FilterPanel部分中设置的标志。与我不会将StuffComponent分解为2个子组件的情况相比，这增加了如此多的代码复杂性

在数据共享的易用性和组件化的级别之间是否总是会有这种相当重要的权衡？在某种程度上，Angular框架似乎不鼓励将代码分解成非常细粒度的组件，除非我在Angular框架中没有正确地执行某些操作

---

有没有更好的方法，或者这只是角度框架中不可避免的一部分？

我认为这取决于你对这类事情的追求程度

是的，你需要服务

下面是我要做的：

• 按所需的组件数量分发当前组件。我喜欢小的
• 有一名一般事务人员充当这些组成部分的调解人。因此，每次他们想要通信时，他们都会通过服务进行通信。这不会增加太多的复杂性。您甚至可以直接从模板更改内容
• 如果您需要通过该组件与外部世界通信，那么EventEmitter会更好

因此，在本例中，您有多个组件和一个服务，其中包含这些多个组件所需的值。在我看来，这是一场胜利，很好的分离，并没有增加太多的复杂性（我认为这样会少一些）

如果你走极端，你会把整个应用程序放在一个组件中，但这是不可管理的，不是吗

---

然而，有些人并没有就此止步。有一种理念是，您的组件必须尽可能地简单，因此它们很容易重用（即使您很少重用它们）。其思想是，如果您有一个想要重用的组件，那么就使用

EventEmitter

，这样每个组件都是自包含的，您几乎可以在任何其他地方重用它们（不需要相关的服务）。如果组件树的深度超过2，那么所发生的是复杂性的增加，假设的可重用性的可读性的降低，而这很可能不存在

---

然而，在实践中，您可能知道您的组件在什么级别是可重用的，并且您可以这样设计它，而无需严格遵循上述指南

另一个选项是使用@input和@output。根据您的配置，将值/标志从父组件传递给其子组件可能更容易

---

有关更多信息，请参阅此处的文档：

我使用输入从父组件传递到子组件，但由于某些原因，在我看到的示例中，输出仅用于处理事件发射器。因此，如果数据是一个子级的属性，那么就没有办法只使用输出将其发送给另一个子级，而不使用事件发射器。除非我误解了，否则一切都得来自父母。因此，具有该属性的子级需要通知父级，而父级又会通知其他子级。这似乎不像每个孩子与其他孩子交流那样相互交织。或者，您可以按照前面的建议使用服务，让每个孩子在服务中获取值并设置值。对。我曾经这样想过，但这有点违背了将变量封装到它“属于最多的”组件中的整个要点（而不是在父级中设置它，并将其向下推到每个设置/获取数据的组件中）。我对Angular是个新手，只是想找出与此相关的最佳实践。因此，也许可以沿着树向上移动到连接的父组件，然后向下移动到需要数据的另一个子组件。我只是想把其他人对这个话题的看法整理一下。谢谢你的文档页面。帮助很大。