共享组件功能（Angular 2）

Question

我有两个主要组件，一个是main-well（有一个用于显示不同组件的路由器链接），第二个是右侧pop-out的组件，需要在应用的每个页面。我希望在路由组件（pop-out的后代）中控制隐藏和显示此main-well的操作。

父页面：

<page-area style="display: inline-block">
  <main-well></main-well>
  <pop-out></pop-out>
</page-area>

MainWell.component.html：

<div class="fill-whole-page">
  <router-link></router-link>
</div>

PopOut.component.html：

<div *ngIf="show" class="pop-out-action pop-out-style">
  <button>Add</button>
  <button>Remove</button>
  <button>Copy</button>
</div>

在<router-link>内打开的组件需要能够告诉pop-out何时显示和隐藏。

如何操纵父母或祖父母的兄弟组件的控件（或访问组件功能）？

Answer 1

您描述的场景似乎符合＆＃34;命名出口＆＃34;。

的用法

您可以重构父组件以获得指定的路由器插座：

<page-area>
  <main-well></main-well>
  <router-outlet name="popout"></router-outlet>
</page-area>

然后，在您的路线定义中，添加辅助路线，将PopOutComponent绑定到popout插座：

{
  path: 'pop-out',
  component: PopOutComponent,
  outlet: 'popout'
},

最后，每当您需要显示弹出窗口（来自应用程序中的任何地方）时，请使用激活该辅助路径的链接：

<a [routerLink]="[{ outlets: { popout: ['pop-out'] } }]">Show Popout</a>

或以编程方式激活路线：

this.router.navigate([{ outlets: { popout: ['pop-out'] } }]);

如果这似乎是您的用例的有效解决方案，请查看该文档：https://angular.io/docs/ts/latest/guide/router.html#named-outlets

其他考虑因素：如果在任何组件和弹出窗口之间需要的唯一通信类型是显示/隐藏，它应该可以正常工作。如果您需要将数据传递给弹出窗口，那么您必须使用服务。

Answer 2

在这种情况下，服务似乎是允许组件之间交互的自然方式。该机制在Component Interaction section of the official documentation。

中描述

基本思想 - 服务注入pop-out组件以及与之交互的任何服务。 pop-out向服务注册，消费者调用服务上的方法与pop-out进行交互。

Answer 3

如果您的组件在模板中无法访问，例如它是动态的并且在路由器插座内创建，那么您可以使用共享服务和发布/订阅模式。 stackoverflow上有几个答案，另见文章Pub Sub in Angular