如何在angular2中的多个组件之间共享服务

我有4个相同组件级别的组件

我叫他们A，B，C，D

这是我的index.html：

<A><A>
<B></B>
<C></C>
<D></D>

现在我有一个服务E

A和B想要共享E的实例E-one

C和D想分享E的另一个实例E-two

如何注入此服务，谢谢

---

ps：我知道如何在两个组件之间按模块共享服务，或者在同一个父组件中共享服务

创建一个共享服务来处理组件之间的内容

存储服务.ts

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class StorageService {

    data$:Subject<any> = new Subject<any>();

    constructor () { }
}

成分B（吸气剂/接收器）

---

Angular有三个提供程序作用域-根、模块和组件。正如您已经知道的，根和模块作用域太宽，这使我们只能使用组件作用域。实际上，您可以使用它来获得所需的行为

让我们仅以组件A和B为例。其中一个（让我们选择一个）必须承担“主”角色并注入所需的服务，同时使其可公开访问。然后，另一个组件（B）可以简单地作为A的公共成员访问服务，而不是注入（从而创建）服务本身。在代码中，它将如下所示：

组件A

@Component({
  selector: 'A',
  template: ''
})
export class ComponentA {
  constructor(public serviceE: ServiceE) {}
}

组件B

@Component({
  selector: 'B',
  template: ''
})
export class ComponentB {
  @Input()
  serviceE: ServiceE;
}

家长

<A #componentA><A>
<B [serviceE]="componentA.serviceE"></B>

您可以对组件C和d执行完全相同的操作—它们将共享自己单独的E实例


我想指出的是，虽然这对我来说似乎完全合法，但可能有更好的方法来实现你的目标

例如，如果其中一个组件比另一个（思考表页脚）更为“主要/中心”（思考表），则较小的组件（页脚）可能只会删除服务的一小部分数据/功能，而不是整个服务实例。您可以使用完全相同的模式公开这些内容，这将导致更好的封装。在表/表页脚的情况下，页脚只需要公开一些（pageChange）事件，并可能接受一些输入，例如[totalDocumentCount]，而不是访问整个服务实例。
如何在4个组件之间共享服务存储实例K、C、D共享服务存储实例J（例如相同的StorageService，但不同的实例）也订阅这些组件
@Component({
  selector: 'B',
  template: ''
})
export class ComponentB {
  @Input()
  serviceE: ServiceE;
}

<A #componentA><A>
<B [serviceE]="componentA.serviceE"></B>