我们可以使用相同的服务使用相同的服务在Angular中的多对组件之间进行通信吗

Question

假设我的页面有4个组件Comp1，Comp2，Comp3和Comp4（所有不相关的组件）。如果我想在Comp1和Comp2之间进行通信。同样在Comp3和Comp4之间。是否可以使用相同的服务在它们之间进行通信？

Answer 1

简短回答是从根本上讲的可注入服务，可以用作组件之间进行通信的手段。使用EmitEvent，您可以广播和订阅特定的呼叫。

@Injectable({
    providedIn: 'root'
})
export class myInjectableService {
    public message: EmitEvent<string> = new EmitEvent();

    public SendMessage(msg:string): void {
         this.message.emit(msg);
    } 
}



@Component({
    selector: "sendComponent",
    template: "<div (click)='SendMessage()'></div>"
})
export class SenderComponent {
    constructor(private injectable: myInjectableService) {}
    public SendMessage(): void {
        this.injectable.SendMessage('Test');
    }
} 



@Component({
    selector: "receiveComponent",
    template: "<div>{{Message}}</div>"
})
export class ReceiverComponent {
    constructor(private injectable: myInjectableService) {
        this.injectable.subscribe((msg) => {
            this.Message = msg;
        })
    }
    public Message: string = null;
} 

Answer 2

是的，你可以做到。

只需声明主模块中提供的服务（如果您尚未触摸，默认值为appModule。]

服务将看起来像这样：

import { Injectable } from "@angular/core";

import { Subject } from 'rxjs';

@Injectable()
export class DataService { 
    private $data = new Subject<CommunicationData>();
    public dataReceivedEvent = this.$data.asObservable();

    public setDataToSend(data: CommunicationData): void {
        this.$data.next(data);
    }
}

CommunicationData是一个接口：

export interface CommunicationData { 
    eventName: string;
    data: any;
}

现在只需将此服务作为DI注入到您喜欢的每个组件中。

constructor(
  private dataService: DataService
) { }

要从这些组件发送数据，只需执行以下操作：

private sendData(): void { 
  this.dataService.setDataToSend({
    eventName: 'YourCustomEvent',
    data: null //can be anything
  });
}

要捕获事件，只需执行（在组件的onInit生命周期中：）：]

this.dataService.dataReceivedEvent
  .subscribe(result => {
    if(result.eventName === 'YourCustomEvent') { 
      //foo
    } else if (result.eventName === '...') { 
      // something else
    } //and so on
  });
这样，您将只有一个服务可以保持所有组件之间的通信。