Question

我有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：我已经知道如何在两个组件之间或在同一个父组件中共享服务

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 / Sender）

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

组件B（获取/接收者）

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

Answer 2

Angular具有三个提供程序范围-根，模块和组件。如您所知，根和模块范围太广，这使我们失去了组件范围。实际上，您可以使用它来获得所需的行为。

在此示例中，我们仅使用组件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>

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

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

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

例如如果其中一个组件比另一个组件（认为表页脚）更“主要/集中”（请考虑 table ），则与其采用整个服务实例，较小的组成部分（ footer ）可能仅消除了服务数据/功能的一小部分。您可以只使用完全相同的模式来公开它们，这将导致更好的封装。在表格/表格页脚的情况下，页脚只需要公开一些（pageChange）事件，并可以接受一些输入，例如[totalDocumentCount]，而不是访问服务的整个实例。

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

2 个答案: