共享组件功能（Angular 2）答案

【问题标题】：Share component functionality (Angular 2)共享组件功能（Angular 2）
【发布时间】：2017-06-12 03:35:41
【问题描述】：

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

父页面：

<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 何时显示和隐藏。

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

【问题讨论】：

【解决方案1】：

您描述的场景似乎适合“命名插座”的用法。

您可以重构您的父组件以拥有一个命名的路由器出口：

<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

额外考虑： 如果您需要的任何组件和弹出窗口之间的唯一通信类型是显示/隐藏，它应该会很好地工作。如果您需要将数据传递到弹出窗口，那么您必须使用服务。

【讨论】：

好主意。关于数据 - 您仍然可以通过 URL 参数将数据传递到弹出窗口。唯一需要考虑的是是否希望将弹出状态反映在 URL 中。根据情况，这可能是可取的，也可能不是可取的。在对话的情况下，这通常是不可取的，但可能会出现相反的情况。

【解决方案2】：

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

基本思想——服务被注入到pop-out 组件中，任何需要与之交互的服务。 pop-out 向服务注册自己，消费者调用服务上的方法与pop-out 交互。

【讨论】：

【解决方案3】：

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

【讨论】：