角度-通过组件进行通讯在生产版本中不起作用

时间:2018-09-22 10:59:20

标签: angular typescript observable subject

我正在开发一个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应用程序构建的。

0 个答案:

没有答案