使用单个服务在不相关组件之间进行通信

Question

我正在工作的角度7应用程序。在我的项目中，我有很多跨组件的交流，而这些组件没有父子关系。

据我所知，解决这些问题的好办法是提供服务。我可以有一个服务来处理所有的通信应用程序(信息将是非常不同的)，还是我必须为每一对组件编写不同的服务？这似乎是很多重复的代码。否则，如果在每个需要发送或接收信息的组件中使用，那么在每个订阅上，它实际上都会订阅通过此服务发送的所有信息，而这些信息绝对不是期望的行为。

我的服务看起来是这样的：

@Injectable({providedIn: 'root'})
export class ComponentService {
  private subject = new Subject<any>();

  sendData(data: any) {
    this.subject.next(data);
  }

  getData(): any {
    return this.subject.asObservable();
  }
}

信息的发送方式如下：

this.componentService.sendData(element);

并在另一个组件中接收，如下所示：

 constructor(private componentService: ComponentService) {
  }

  ngOnInit() {
    this.componentService.getData().subscribe(data => data);
  }

显然，如果整个应用程序都使用ComponentService，这将使所有组件(与他人通信)订阅他们不希望接收的信息，也不需要接收信息。应该采用什么方法？

Answer 1

从技术上讲，您可以有一个带有一个主题的服务，该服务发射一个具有属性的对象，该属性确定它是什么类型的数据，例如：

{ type: 'CustomerId', value: 35 }

然而，你不会受益于打字稿的类型暗示。TypeScript的好处是您可以声明一个类型别名/接口(比如CustomerData)，然后有一个类型化的主题来发出这些数据：

private subject: Subject<CustomerData> = new Subject<CustomerData>();

当您在组件中订阅此主题时，您将得到一个类型化的结果，而不是any类型，而应该尽可能少地(或者永远)使用该类型。

如果您关心代码复制，您可以创建一个抽象的泛型基本服务，并让您的其他服务扩展它：

@Injectable({providedIn: 'root'})
export abstract class BaseComponentService<T> {
  private subject = new Subject<T>();

  sendData(data: T) {
    this.subject.next(data);
  }

  getData(): any {
    return this.subject.asObservable();
  }
}

因此，在创建新服务时，可以使用定义的类型扩展类：

type SubType = {
  name: string;
  age: number;
};

@Injectable()
export class SubService extends BaseComponentService<SubType> {
}