共享组件功能 (Angular 2)

Question

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

Parent 页数：

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

如何操作 parent 或 grandparent 的同级组件的控件（或访问组件功能）？

Answer 1

如果您的组件无法在模板中访问，例如它是动态的并且在 router-outlet 中创建，那么您可以使用共享服务和 Pub/Sub 模式。 Whosebug 上有几个答案，另见文章 Pub Sub in Angular

Answer 2

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

中描述了该机制

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

交互

Answer 3

你描述的场景似乎符合"named outlets"的用法。

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

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

然后，在您的路由定义中，添加一个 辅助路由 将 PopOutComponent 绑定到 popout 出口：

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

最后，每当您需要显示弹出窗口时（从应用程序中的任何位置），使用 link 激活辅助路由：

<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

其他注意事项： 如果您在任何组件和弹出窗口之间需要的唯一通信类型是 show/hide，它应该工作正常。如果您需要将数据传递给弹出窗口，那么您必须使用服务。

Share component functionality (Angular 2)