在 Angular 中重用 observables 服务

Question

我有一个用于在组件和模块之间进行通信的服务。

@Injectable({
  providedIn: 'root'
})
export class CommunicationService<T> {

  private emitChanges = new Subject<T>();
  changes$ = this.emitChanges.asObservable();

  sendData(message: any) {
    this.emitChanges.next(message);
  }

  clearData() {
    this.emitChanges.next();
  }

  complete() {
    this.emitChanges.complete();
  }
}

假设我正在从Component 1发送一个字符串

export class Component1 {

  constructor(private comms: CommunicationService<string>){}

  onClick(){
    this.comms.sendData('hello');
  }
}

这是在Component 2中收到的

export class Component2 implements OnDestroy {

  constructor(private comms: CommunicationService<string>){
    this.comms.changes$.subscribe(data => console.log(data));
  }

  onDestroy(){
    this.comms.next();
    this.comms.close();
  }

}

上面的代码工作正常，但是当我尝试重用时， component 3和组件 2 中的代码也接收到相同的数据。 在边框图片中，如果我使用不同的数据类型，比如将不同属性的接口连接到另一个不同的属性，我会收到错误消息，指出属性不存在。

有没有办法基于T重用此服务，并在某处检查以下内容：

if (this.comms.changes$ instanceof Subscriber<someObject>){ // I know this is not possible
...
}

任何帮助，将不胜感激。

Answer 1

不确定这是否正是您想要的，但我有一个建议。 目前，您的服务中有“providedIn：root”。 这意味着将只为整个应用程序创建一个服务实例，并且您发送给主题的任何数据都将被订阅它的所有组件接收。

可以在组件级别而不是根级别提供服务。 去做这个：

1. 从您的服务中删除提供的In：root，您应该只剩下@Injectable({})
2. 对于您想要服务实例的每个组件，您在 @Component 中添加以下内容：'@Component({providers: [ CommunicationService ]})'

现在，您提供的每个组件都将拥有一个服务实例。