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

Question

我正在开发一个 Angular 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

从技术上讲，您可以拥有一个带有 Subject 的服务，该服务发出一个对象，该对象具有确定数据类型的属性，例如：

{ type: 'CustomerId', value: 35 }

但是，您不会从 TypeScript 的类型提示中受益。 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> {
}