角2 + / 4/5/6/7：智能，哑和深度嵌套组分通信

Question

注：为简单起见考虑组件深度为：

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

有多种方案和条件对智能/盛大/父/子组件如何沟通和高达传递数据，下一个多层次的（至少3级）链。我们想保持我们的“智能”（盛大）父组件作为具有我们的数据服务（或原子/一成不变店）访问的唯一部件，它会带动与“哑巴”（大）儿童的信息交流。我们看到的选项：

1. 反模式（？） ：通过数据向下并经由@输入/输出@绑定起来组件链。这就是一些所称的“外来性”或“自定义事件冒泡问题”的问题（如：here和here）的问题。没有去。
2. 反模式：智能组件访问哑（大）通过@ViewChildren或@ContentChilden孩子。这又硬连线的孩子，仍然没有创造一个清洁机制，（盛大）儿童数据传递到智能组件。
3. 如在angular.io食谱here和优异的交here描述共享消息服务。
4. ?

现在，在“3”的情况下，哑（盛大）的孩子必须有消息业务注入。这让我想起我的问题：

Q1：似乎每个“哑巴”（盛大）儿童的直观奇有消息业务注入。最佳做法是为消息服务是为这个家一个专门的服务或者它捎带上“智能”祖父母被指控上述数据服务吗？

Q1A：另外，这是怎么要比上下链添加@输入/输出@如果绑定的所有组件都会有服务的注射好？ （我看到，“哑巴”组件需要一些方法的参数获取信息）

Q2：在“智能”盛大母公司是一个终极版样的商店沟通如果（NGRX我们）？再次是最好的“哑巴”组件的通信通过注入/专用消息服务发生的或者是最好的注入店到每一个“哑巴”组件......还是？注意，组件间通信是“动作”的组合：除了数据（例如表单验证，禁用按钮等）（即数据添加到/更新专门店或服务）。

思考不胜感激！

Answer 1

（UPDATE：2019年2月7日：这个职位是得到日 - 增加了“存储/ NGRX”图案）

寻找到这个进一步，当它涉及到如何最好地向下一个嵌套的组件链沟通和高达所以以后，似乎真的只有两种选择 - 之间的浮士德式的交易：

无论是

• 要么通过@输入/输出@绑定向上，向下，并在整个嵌套组件链（即处理的“定制事件冒泡”的问题或“外来属性”）

要么

• 使用消息/订阅服务该家族部件（大描述here）之间进行通信，并注入该服务链中的每个组件。

要么：

• 反应性存储模式（例如“NGRX”）是另一种选择。注意，国际海事组织，聪明和愚蠢的组件的概念仍然适用。也就是说，哑成分不会直接访问存储。同样，智能组件是党政主要通过实体店获得的数据。

我个人利用智能和表象（“哑巴”）成分的支持者。添加一个“存储”也应该有选择地做，因为它显著增加的过程，从架构，统一的实施模式，开发和维护，入职的新员工的成本。名义上，一个“哑巴”组件只需要@Inputs和@Outputs，仅此而已。它不关心它是在一个组件树有多深或浅的 - 这是应用问题。事实上，它并不关心应用程序使用它摆在首位。同时，如果一个应用程序特定的服务注入到它内心深处成分是不是很愚蠢或运输。 BTW，计数器部分“智能”组件提供真正的中介服务（通过一流的服务@Injectable或终极版样店）为准哑组件在其家谱需要它。智能组件也只要不计较超越了其直接孩子的@Inputs组件孙子莫名其妙信号了服务/存储行动需要采取（通过@输入/输出@再次链）。这样，智能型组件也成为跨应用程序线运输。

鉴于此，浮士德式的交易，国际海事组织，上倾向于利用所有它所带来的提到的问题的@输入/输出@链。这就是说，我保持这个眼睛和欢迎清洁和去选择，如果任何人的任何人知道。

Answer 2

输入（）和输出（）的绑定也处理这个完全合法的方式。让智能型组件处理产生的值的逻辑，然后使用输入（）和输出（）简单地沿着部件链传递和接收的值。

当然，这指向智能/视图方法的缺点之一：多个文件;更多的样板。这就是为什么我不会为一个单一的做法，是一个尺寸适合所有的争论。相反，选择一个有意义的方法，在目前情况下（无论是应用程序，并为您的组织）。

Answer 3

为什么＃1的反模式？祖父母组件拥有数据，并将其传递至经由@input参数哑子组件。哑子组件简单地调用回调当事件发生时（经由@Output事件发射器），导致祖父母部件来操纵数据。似乎干净给我。

编辑：我看到经过反复像提交处理程序值经过许多中间层你的观点。也许这代表你的组件树嵌套结构可以在父组件来创建。然后，每个元件可以被传递它所需要的性能，再加上一个目的是向下传递到下一个组件。每个组件然后只知道它下面的一个：

// Parent component builds this object (or gets a service to do it)

viewModelForChildComponent: {

    property1NeededForChildComponent,

    property2NeededForChildComponent,

    viewModelForGrandChildComponent: {
        property1NeededForGrandChildComponent,

        property2NeededForGrandChildComponent,

        viewModelForGrandGrandChildComponent: {
            property1NeededForGrandGrandChildComponent,

            submitHandlerNeededForGrandGrandChildComponent
        }
    }
}