时间戳

首页 > 解决方案 > 我们可以使用相同的服务在使用相同服务的 Angular 中的多对组件之间进行通信吗

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

问题描述

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

标签： angularangular-materialangular-services

解决方案

简短的回答是根部的可注入服务可以作为组件之间通信的一种手段。使用 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;
}

推荐阅读