Question

我正在尝试在我的Angular应用程序中创建一个小部件系统，其中每个小部件都是一个组件，其中一些与其他组件交互。

我有一个blogComponent，它包装了我的所有组件并将后列表组件调用为

 <app-post-list
          [author]   = "post_author"
          [category] = "post_categories"
          [search]   = "search_terms"
        ></app-post-list>

和我的小部件

<app-widget-search (WidgetSearchEvent)="WidgetSearchEvent($event)"></app-widget-search>
<app-widget-categories (WidgetCategoriesEvent)="WidgetCategoriesEvent($event)"></app-widget-categories>
<app-widget-text></app-widget-text>
<app-widget-recent-posts></app-widget-recent-posts>
<app-widget-recent-comments></app-widget-recent-comments>

因此，一些小部件使用EvenEmmiter将一个Output值发送到app-post-list并再次呈现新的帖子列表，并且它工作正常。但现在我想将所有小部件包装在其他组件side-bar上以将它们全部打包为：

<app-side-bar></app-side-bar>

但是，如果我这样做，EventEmiter方法不起作用。还有其他解决办法吗？

Answer 1

除非您希望每个级别都有很多事件发射器，否则您需要查看要与之通信的组件之间的共享服务。我通常会转向与父母/子女直接沟通之外的服务共享数据。

Answer 2

现在你需要在侧栏上创建事件选择器并一直向上。这看起来很丑，但唯一的方法。或者，您可以在这些组件之间创建服务，如果您有许多此类组件，请注意服务的可见性，具体取决于您的全局或本地需求。这实际上是redux解决的问题。当你不需要一路向上并将发射器包裹在emmiters中时。但只是派遣行动，它将通知所有组件。

角度组件通信

2 个答案: