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

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

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

{ type: 'CustomerId', value: 35 }

但是，您不会从 TypeScript 的类型提示中受益。 TypeScript 的好处是，您可以声明类型别名/接口(interface)(例如 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> {
}