Angular 2中的不同模块组件通信

Question

我有一个组件,我希望它将数据传递给另一个模块中的另一个组件.实际上我app.component是这些儿童模块的父母.我希望每个子模块都能发送一些数据app.component.但他们只是一个路由的孩子和父母.我猜他们实际上并不是父母和孩子.

我的意思是,我的模板app.component看起来像这样:

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
      <li><a routerLink="link1" routerLinkActive="active">Page1</a></li>
      <li><a routerLink="link2" routerLinkActive="active">Page2</a></li>
      <li><a routerLink="link3" routerLinkActive="active">Page3</a></li>
      <li><a routerLink="link4" routerLinkActive="active">Page4</a></li>
    </ul>
  </div>
</nav>
<div *ngIf="needsSidebar" id="sidebar">some content</div>
<div>
  <router-outlet></router-outlet>
</div>

所以app.component与这些模块及其组件没有直接联系.我尝试使用,Output但由于组件来自不同的模块,它失败了.我迷失了,我应该怎么做.我希望我的"子"模块能够向上发送数据,app.module告诉它是否需要侧边栏以及哪些内容应该侧边栏显示.我该怎么做？

Answer 1

模块是如何相关的并不重要.重要的是,如果组件是组件视图中的子组件.在这种情况下,您可以使用Angulars绑定语法.在其他情况下使用共享服务.有关详细信息,请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html

同样重要的是,您将共享服务添加为提供者.如果将其添加到组件,则只有此组件的实例及其子项和子项共享此服务实例.如果向@NgModule()单个实例的提供者添加服务,则与整个应用程序共享(对于非延迟加载的模块).