输入输出与 ngrx Dispatch Oftype答案

【问题标题】：Input Output vs ngrx Dispatch Oftype输入输出与 ngrx Dispatch Oftype
【发布时间】：2019-10-13 16:27:16
【问题描述】：

如果您使用 Ngrx Store，请告诉我在 Angular 组件之间进行数据通信的最佳方式是什么。

使用输入输出
使用 despatch(action) ofType(action)

例如 Component1 -> 发送数据到 -> Component2。一段时间后，业务告诉我添加新服务，所以我决定创建一个新的 Component3 并将其添加到它们之间。所以现在我必须修改数据流。组件1->组件3->组件2。因此，使用input outpt 或despatch(action) ofType(action)，代码会更加简洁易懂吗？

【问题讨论】：

标签： angular ngrx

【解决方案1】：

我认为这取决于您的应用程序的大小以及组件之间有多少级别，假设您有一个 child5 组件必须与 child1 通信，在这种情况下使用输入输出不是一个好主意，如下图，如果 child 组件必须与 Grandparent 通信，它必须经过 Parent，即使没有，Parent 也会参与流程'与该数据无关

这里更好的方法是使用 Subject 并创建和 EventBus，在这里查看我的答案 https://stackoverflow.com/a/56291422/4399281

Ngrx store 是最好的选择，但如果你真的需要它，如果你只有很少的组件，就不要实施状态管理

【讨论】：

我有一个中间应用程序，超过 40 个组件
如果组件之间的通信量很大，可以使用状态管理，取决于你有多少时间，主题解决更快更容易

【解决方案2】：

一般来说，如果你已经在使用 NgRx，你应该坚持它的模式，并通过 Store 传递所有应用程序状态。

输入和输出很快就会变得难以追踪，尤其是当应用变得越来越复杂时。如果您想添加使用相同数据的功能怎么办？如果您已经在使用商店，您只需订阅您需要的部分即可。

毫无疑问，在某些情况下您会想要使用自定义属性和事件，但如果您选择使用 NgRx，那么您几乎总是希望使用 Store 进行状态管理。不然为什么要安装？

【讨论】：

但是在很多情况下你不能避免使用输入和输出，例如，一个父“a”有两个子“b”的实例但具有不同的数据，组件“b”内的选择器增加完成度并降低其可重用性，至少我是这么认为的。另一个例子是它在 ngFor 中的组件，我认为解决这些情况的唯一明确方法是输入和输出解决方案。对不起我的英语不好。感谢您对此的看法，因为我想为我澄清这个话题
你的英语比你想象的要好:) 重读这个答案让我想给它添加一些细微差别。组件之间绝对有输入/输出通信的地方，即使在您使用状态管理系统的应用程序中也是如此。这实际上是一个特定于案例的决定，但是您可以使用智能/哑模式，例如，父组件从存储中获取所有数据并通过属性绑定将其传递给其子组件。在应用程序的不同区域重用组件时，输出也非常方便。