角度智能（容器）/哑（表示）组件体系结构，条件逻辑和传播输入

Posted 2021-04-06

考虑两个哑组件A和B. A OR B中的一个将由组件C显示，组件C用于智能组件D.

  D (smart)
  |
  C (dumb)
 / 
A   B (both dumb)

A和B都有10个输入。我看到至少有几种方法可以解决这个问题：

1. 让C取20个输入，这些输入将是组件A和B的输入的并集，即使我只使用其中一半的输入
2. 使C成为一个智能组件，但这意味着在一个真实世界的复杂应用程序中有更多的智能组件，这种模式出现在很多地方
3. 通过让C采用TemplateRef或类似方法“投射”A和B组件，然后仅绑定D中的输入并让D决定显示哪个
4. 尝试将部分输入组合成更大的“输入对象”。这似乎会使数据绑定变得复杂，因为A和B只会被通知“输入对象”发生了变化，并且不会知道更改内容的细节，除非我在这些组件中有不同的逻辑。

是否有处理这种情况的最佳做法或常见做法？ A和B的输出出现了类似的问题，当使用任何双向数据绑定时，两种情况都会出现！

我试过四处搜索，甚至尝试寻找React而不是Angular的建议，但无济于事。

我可以尝试生成一些类似于我正在处理的代码的示例代码，如果这会有所帮助，但这需要一些时间。

答案

我会强烈考虑将数据通信转移到共享服务，而不是试图通过输入和输出传递所有这些。

如果组件“C”不需要任何绑定到“A”或“B”的信息，则它根本不必处理它。

共享服务可以包含20个左右的数据项，以及“A”和“B”的Subject或BehaviorSubject将更改传递回“D”。

我不确定你所做的事情是否足够复杂以保证它，但如果你做了很多这样的事情，那么Redux可以为你提供一个很好的模式。

当最简单的绑定太简单时，我最近开始使用Redux，取得了巨大的成功。我发现ngrx / store有点繁琐，难以使用且没有很好的文档记录，尽管它有很多新闻，并且发现angular-redux（一个瘦的Angular包装器在实际的Redux库上）更容易使用，并且它有更好的文档。