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

Question

我在相同的组件级别上有4个组件；

我叫他们A，B，C，D

这是我的index.html：

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

现在我有一个服务E；

A和B想要分享E的E-1实例，

C和D想分享E的另一个例子e-2，

如何注入这项服务，谢谢！

ps:我知道如何在两个组件之间或在同一个父组件中共享服务。

Answer 1

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

storage.service.ts

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

@Injectable()
export class StorageService {

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

    constructor () { }
}

组件A(Setter/发件人)

this.storageService.data$.next('Message to send, you can pass data');

组件B (Getter/Reciever)

this._subscription = this.storageService.data$.subscribe( data => {
    this.data = data;
});

Answer 2

角有三个提供范围-根，模块和组件。正如您已经知道的，根和模块作用域太宽了，这就留给了我们组件范围。你可以用它来得到你想要的行为。

让我们只使用组件A和B作为这个例子。其中之一(让我们选择A)必须承担“主”角色并注入所需的服务，同时将其公开访问。然后，另一个组件(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>

这是来自docs：https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable的这个示例的修改版本。

您将对组件C&D做完全相同的事情--它们将共享自己的单独实例E。

我想指出，虽然这在我看来是完全合法的，但可能有更好的方法来实现你的任何目标。

例如，如果其中一个组件比另一个组件更“主/中央”(think )，那么与服务的整个实例不同，较小的组件(页脚)可能只会删除服务数据/功能的一小部分。您可以只公开那些使用完全相同的模式，这将导致更好的封装。在表/表页脚的情况下，页脚只需要公开一些(pageChange)事件，并且可能接受一些输入，例如totalDocumentCount，而不是访问整个服务实例。