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，但由于组件来自不同的模块，因此失败了。我迷失了该怎么做。我想要我的孩子＆＃34;模块将数据发送到app.module以告诉它是否需要侧边栏以及侧栏显示的内容。我该怎么做？

Answer 1

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

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

Answer 2

在这种情况下，您可以查看 sharedModule 。您希望在不同模块/组件中使用的 SharedModule 共享services,pipes & etc。

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

2 个答案: