我们可以使用同一服务在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);
}
}

通信数据是一个接口：

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
});
}

要捕获事件，只需执行(在组件的onUnit生命周期中(：

this.dataService.dataReceivedEvent
.subscribe(result => {
if(result.eventName === 'YourCustomEvent') { 
//foo
} else if (result.eventName === '...') { 
// something else
} //and so on
});

通过这种方式，您将只有一个服务来保持所有组件之间的通信。