我正在开发一个Angular应用程序,其中我实现了使用服务将消息发送到不同组件的功能。在开发模式下一切正常,但在生产构建中,服务不会发送消息。以下是我执行的步骤确实实现了此功能。
首先,我创建了一个服务,并在其中创建了一个可观察(对象)对象。每个组件都将订阅该可观察对象,并且该服务将具有一种用于发送消息的方法。
@Injectable()
export class ComponentMessageService {
/** message subject */
private messageSource = new Subject<MyMessage>();
/** message observable */
messageSource$ = this.messageSource.asObservable();
/** broadcastMessage */
broadcastMessage(message: MyMessage) {
this.messageSource.next(message);
}
}
接下来我创建了一个组件,该组件将定义订阅服务的通用方法。每个组件都将扩展此类。
export abstract class MessagingComponent{
disposableObject:any;
constructor(public componentMessageService:ComponentMessageService){
this.disposableObject=componentMessageService.messageSource$.subscribe(message => {
this.handleMessage(message);
});
}
handleMessage(message: MyMessage){
}
unsubscribeMethod(){
this.disposableObject.unsubscribe():
}
}
最后一步是创建一个实际对象并覆盖handleMessage函数。当该组件捕获消息时,我想更改一个变量以显示弹出窗口。
export class InstructionsPopupComponent extends MessagingComponent{
constructor(public componentMessageService:ComponentMessageService,
private changeDetector : ChangeDetectorRef){
super(componentMessageService);
}
handleMessage(message: MyMessage){
if(message.messageType==MyMessageTypes.DISPLAY){
this.display=true;
this.changeDetector.detectChanges();
}
}
ngOnDestroy(){
this.changeDetector.detach();
this.unsubscribeMethod();
}
}
要发送消息,我导入了服务,然后调用broadcastMessage。 我正在处理的应用程序是从Jhipster应用程序构建的。