在不共享同一父组件的子组件之间共享 Angular 2 服务

Question

假设我有一个 Angular 2，其结构如下：

换句话说，有一个根父组件 A 包含两个不同子组件的实例 B 和 C。

现在假设我想创建一个 MyService class 以在子组件的每个垂直列之间共享。更具体地说，我希望能够将 MyService 注入到组件 B 和组件 C 的构造函数中，同时 Angular 创建整个服务的两个实例（一个用于第一列子组件和第二列子组件）。

一种方法是将每一列子组件包装在中间组件中 P，然后使用 [=21] 在其 @Component 装饰器中将 MyService 声明为提供者=].这确保 P 的每个实例（因此也包括其所有子组件）将收到它们自己的 MyService:

实例

但是，我想避免使用这种解决方案，因为创建像这样的中间包装组件似乎有很多额外的样板，而且还需要重组组件在组件 A 的模板中的布局方式.

在 Angular 2 中有实现此目的的简单方法吗？谢谢！

Answer 1

托管注入器和 MyService 提供程序的父组件是正确的解决方案。这就是 Angular 2 DI 的工作原理。即使有可以创建 MyService class 个实例的单例服务 MyServiceFactory，它如何确定 B 和 C 应该接收一个公共的 MyService 实例，考虑到有几个 Bs 和 Cs?

最好是父组件，除非有无法解决的布局问题。否则它可以是带有 MyService provider,

的指令

@Directive({
  selector: '[p]',
  providers: [MyService]
})
class P {}

这导致透明布局

<ng-container p>
  <b></b>
  <c></c>
</ng-container>
<ng-container p>
  <b></b>
  <c></c>
</ng-container>

Answer 2

那么两个组件都订阅的静态 EventEmitter 呢？

有一天我在某处看到了（如果我记得我会放一个 link）。我现在就在使用它，没有明显的缺点，我会看看应用程序何时增长。

//the "commands dispatcher" class :

import { EventEmitter } from '@angular/core';

export class CommandsDispatcherService {
  private static store: { [channel: string]: EventEmitter<any> } = {};

  static get(channel: string): EventEmitter<any> {
    if (!this.store[channel]) {
      this.store[channel] = new EventEmitter();
    }
    return this.store[channel];
  }
}

组件A和B（没有任何层级关系）只导入class（无提供者），在init上订阅它并使用get方法在他们自己的私有频道上相互通信。我发现这很酷。

在不共享同一父组件的子组件之间共享 Angular 2 服务

Sharing an Angular 2 service between child components who don't share the same parent component

angular

typescript

angular2-services