Угловой - связь через компонент не работает в сборке - PullRequest
0 голосов
/ 22 сентября 2018

Я работаю над приложением Angular, в котором реализована функциональность отправки сообщений различным компонентам с помощью службы. В режиме dev все отлично работает, но при производственной сборке служба не отправляет сообщение. Ниже приведены шаги, которые яЯ сделал для реализации этой функциональности.

Прежде всего, я создал службу, в которой я создал наблюдаемый (субъект) объект. Каждый компонент будет подписываться на эту наблюдаемую, и у службы будет метод, используемый для отправки сообщений.

@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.

...