Angular 2中不同模块组件的通信
我有一个组件，我希望它将数据传递给另一个模块中的另一个组件。实际上，我的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上，告诉它是否需要侧边栏，以及应该显示哪些内容。我该怎么做呢？
回答 3
Stack Overflow用户
发布于 2016-10-10 17:07:54
模块之间是如何关联的并不重要。重要的是，组件是否是组件视图中的子级。在这种情况下，您可以使用Angulars绑定语法。在其他情况下，使用共享服务。有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html
同样重要的是，在何处添加共享服务作为提供者。如果将其添加到组件中，则只有此组件的实例及其子项和子组件共享此服务实例。如果向@NgModule()的提供者添加服务，则与整个应用程序共享一个实例(对于非惰性加载的模块)。
Stack Overflow用户
发布于 2016-10-10 17:11:51
在这个场景中，您可以看看。SharedModule共享您希望在不同模块/组件中使用的services,pipes & etc。
Stack Overflow用户
发布于 2021-10-27 08:54:37
我也遇到过同样的问题，并尝试了@Input()，但它对我不起作用( @Input()组件引用总是undefined)，可能是因为不相关的组件。正如本文所建议的，共享服务可能是在不同模块中通信组件的最佳方法：https://www.pluralsight.com/guides/communicating-across-components-using-services我是Angular的新手，我花了近2个小时试图找到更简单的方法，但我已经在几分钟内建立了一个服务。
https://stackoverflow.com/questions/39954785
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号