小编sic*_*lap的帖子

目前正在重构 Angular 应用程序以使用 ngrx 存储并有两个选项。这是我们应用程序的基本结构。我相信大多数 Angular 应用程序都是以相同的方式构建的：

AppComponent
|-- ContainerComponent
    |-- ChildComponent1
    |   |-- GrandChildComponent
    |       |-- GrandGrandChildComponent
    |-- ChildComponent2

ContainerComponent 已注入Store<AppState>. 我试图解决的问题是 GrandGrandChildComponent（例如 DropDownMenu 组件）必须根据应用程序的状态更改其行为（即在商店中发生的某些情况下禁用某些菜单项）并在单击时发出事件在菜单项上ContainerComponent（或任何其他组件，不是必需的祖先）可以对它做出反应。

有几种解决方法：

1. 使用@Input/在组件之间进行通信@Output
2. 注入Store任何需要了解状态的组件

选项 1 是我在文档中读到的最常见/推荐的模式。所以只有 ContainerComponent 是胖的，所有的孩子都是瘦/哑的，并且依赖于通过@Input.

但是从我看来，这种方法增加了很多样板，您必须添加不必要的属性才能将状态传递给 Grand Child 组件。而且它打破了关注点分离原则，因为任何中间组件都必须知道下面的组件需要什么。如果知道只有在 Grand Components上可用的细节，那么制作通用组件并不容易。

另一方面，方法 2 似乎解决了分离关注点的问题，而且它的实现似乎也更清晰。但由于我在使用方面相对较新redux模式方面我不确定这是否是可行的方法，也许我不知道当我在重构中过于深入时可能会遇到任何陷阱。

IMO，这两种方法都提供了一种对每个组件进行测试的简单方法，这对我来说非常重要。

我怀疑采取哪种方法。我应该注意哪些陷阱？

谢谢