Angular 2 +/4/5/6/7:智能,愚蠢和深度嵌套的组件通信

Question

注意:为简单起见,请将组件深度视为:

- Smart (grand)parent level 0
  - dumb child level 1
   ....
    - dumb grandchild level 2
      ....)

有关智能/大/父/子组件如何在MULTI-LEVEL(至少3级)链上下传递和传递数据的各种选项和条件.我们希望将"智能"(宏)父组件保留为可以访问我们的数据服务(或原子/不可变存储)的唯一组件,并且它将促使与'哑'(大)子项交换信息.我们看到的选项是:

1. 反模式(？):通过@ Input/@输出绑定向下和向上传递数据.这有些人称之为"无关属性"或"自定义事件冒泡问题"问题(例如:此处和此处)问题.不行.
2. 反模式:通过@ViewChildren或@ContentChilden智能组件访问哑(大)孩子.这再次硬连接了孩子,并且仍然没有为(大)孩子创建一个干净的机制来将数据UP传递给智能组件.
3. 如在angular.io食谱描述共享消息服务这里和优异的交这里.
4. ？

现在在'3'的情况下,愚蠢的(大)孩子必须注入消息服务.这让我想到了我的问题:

Q1:对于每个'哑'(大)孩子来说,注入一个消息服务似乎很奇怪.消息服务的最佳做法是为这个家庭提供专门的服务,还是重新回到上面提到的"智能"祖父母的数据服务？

Q1A:另外,如果所有组件都注入了服务,那么这比在链上下添加@ Input/@输出绑定要好得多吗？(我看到'哑'组件需要一些方法来获取信息的论点)

Q2:如果'聪明'的盛大父母正在与类似redux的商店(我们的ngrx)进行通信怎么办？与'哑'组件的通信最好通过注入/专用消息服务进行,或者最好将商店注入每个'哑'组件......或者？注意,除了数据(即向/更新商店或服务添加数据)之外,组件间通信是"动作"(例如:表单验证,禁用按钮等)的组合.

非常感谢!

Answer 1

(更新:02-07-2019:这篇文章过时了 - 添加'store/ngrx'模式)

因此,在进一步研究之后,当涉及到如何最好地向下和向上交换嵌套组件链时,似乎只有两个选项 - 以下之间的Faustian交易:

无论是

• 要么向上,向下传递@ Input/@输出绑定,要么在整个嵌套组件链中传递(即处理'自定义事件冒泡'或'无关属性'的问题)

要么

• 使用消息传递/订阅服务在此系列组件之间进行通信(此处有很好的描述),并为链中的每个组件注入该服务.

要么:

• 反应商店模式(例如'ngrx')是另一种选择.注意,IMO,智能和愚蠢组件的概念仍然适用.也就是说,哑组件永远不会直接访问商店.同样,智能组件是通过商店获取数据的主要方.

我个人支持使用智能和表现('哑')组件.添加"商店"也应该有选择地进行,因为它会显着增加流程的成本,从架构,一致的实施模式,开发和维护到新员工的入职.名义上,'哑'组件只需要@Inputs和@Outputs就是这样.它并不关心它在组件树中的深度或浅度 - 这就是应用程序问题.事实上,它并不关心应用程序首先使用它.同时,如果向其注入特定于应用程序的服务,则内部组件不会非常愚蠢或可移动.顺便说一句,对应的"智能"组件实际上是为其家族树中需要它的任何愚蠢组件提供中间服务(通过一流的@Injectable服务或类似于redux的商店).智能组件也不关心其直接子项的@Inputs之外的组件,只要孙子以某种方式表示需要采取服务/存储操作(再次通过@ Input/@ Output链).这样,智能组件也可以跨应用程序线传输.

鉴于此,Faustian交易IMO倾向于利用@ Input/@ Output链及其带来的所有上述问题.也就是说,如果有人知道的话,我会密切注意这一点并欢迎干净和脱钩的替代方案.