灯箱组件与其子组件之间的通信？

Question

我有以下标记来显示灯箱中的任何组件：

<lightbox>
  <some-comp></some-comp>
</lightbox>

我正在尝试为两个组件找到更通用和Angular方式进行通信（我已阅读https://angular.io/guide/component-interaction）。例如，子组件可能会对灯箱说：

• 我的内容很大，所以你需要扩展。
• 我包含一个表单，这是通过表单提交的数据。
• 等

重要。灯箱预先不知道它将保留哪种类型的组件。

我可以通过在两个组件中注入服务来使其工作，并且该服务包含Subject，它充当两个组件之间的通信总线（此解决方案描述为in the docs）。

但还有另外一种方法吗？我正在开发一个UI组件库，服务解决方案强制库的用户在灯箱中显示的每个组件中注入和操作服务。我想避免这种情况。

（我的另一个想法是让灯箱获得对其子组件的访问权并订阅该组件上的特定属性，但很难以通用的方式进行。）

Answer 1

明确地将孩子传递给父母

一种方法是明确传递孩子

  <parent [child]="child">
    <child #child></child>
  </parent>

Plunker example

在父母

上提供服务

另一种方法是在父级上提供服务，并将其注入子组件。

Plunker example

最好使用observables（BehaviorSubject，...）进行通信，而不是使用Plunker中使用的简单字段方法。

结论

在各方面，需要进行一些合作，无论是使用父组件的开发人员还是构建支持子组件的开发人员。

Answer 2

采取前进Gunter的回答你也可以看看 NGRX 。

这是在大型组件之间进行通信的最佳方式之一，这两个组件的行为类似于Dumb Components i：e不会知道每个组件的数据类型。

将数据保存在中心位置还可以帮助您更好地管理应用程序的状态，从而提高灵活性并增加未来增强功能。

我有一整页致力于ngrx（v4）希望它有助于link