Rxjs 订阅方法被忽略 [英] Rxjs subscribe method being ignored

问题描述

在将其标记为重复之前，请注意这些都不适合我:问题1/问题2/问题3

BEFORE tagging it as a duplicate, note that None of these worked for me: question 1 / question 2 / question 3

因此，在收到对上一个问题 我按照 上的所有内容开始使用 rxjs指南我得到了

So, after getting a reply to a previous question I started using rxjs following everything stated on the guide I was provided with

但是，由于未触发 subscribe 方法，我很快又在过去几个小时内再次陷入困境.

However, I soon got stuck again for the last couple of hours because of the subscribe method not being triggered.

我的服务编码如下:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
import {FormDTO} from "../dto/formDTO.model";

@Injectable()
export class ApiDosageDialogFormCommunicationService {

    private formDTO = new Subject<FormDTO>();

    //Observable string streams
    formDTOpulling$ = this.formDTO.asObservable();

    //Service message commands
    formDTOpushing(formDTO: FormDTO) {
        this.formDTO.next(formDTO);
    }

将它从父母发送给孩子，例如:

Sending it from the parent to the child like:

this.apiDosageDialogFormCommunicationService.formDTOpushing(this.formDTO)

到这里为止一切正常，服务接收到 DTO，我可以读取它的值，但是当我尝试在模式服务中使用它时，subscribe 方法什么也没做，这是我所在的组件我正在尝试获取 DTO:

It works fine up until here, the service receives the DTO and I can read its values, but when I try to use it in the modal service, the subscribe method does nothing at all, this is the component in which I'm trying to fetch the DTO:

  import {Component, OnDestroy, OnInit} from "@angular/core";
import {JhiEventManager} from "ng-jhipster";
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {Response} from "@angular/http";
import {ActivatedRoute} from "@angular/router";
import {Observable} from "rxjs/Rx";
import {FormService} from "./form.service";
import {FormDTO} from "../dto/formDTO.model";
import {ApiDosageDialogFirstStepPopupService} from "./apiDosage-dialog-first-step-popup.service";
import {ApiDosageDialogFormCommunicationService} from "./apiDosageDialogFormCommunication.service";
import {Subscription} from "rxjs/Subscription";

@Component({
    selector: 'jhi-apiDosage-dialog-first-step',
    templateUrl: './apiDosage-dialog-first-step.component.html'
})

export class ApiDosageDialogFirstStepComponent implements OnInit {

    formDTO: FormDTO;
    isSaving: boolean;

    constructor(
        public activeModal: NgbActiveModal,
        private formService: FormService,
        private apiDosageDialogFormCommunicationService: ApiDosageDialogFormCommunicationService,
        private eventManager: JhiEventManager
    ) {
    }

    ngOnInit() {
        this.isSaving = false;
    }

    clear() {
        this.activeModal.dismiss('cancel');
    }

    save() {
        this.isSaving = true;
        if (this.formDTO.id !== undefined) {
            this.subscribeToSaveResponse(
                this.formService.save(this.formDTO));
        } else {
            this.subscribeToSaveResponse(
                this.formService.save(this.formDTO));
        }
    }

    private subscribeToSaveResponse(result: Observable<FormDTO>) {
        result.subscribe((res: FormDTO) =>
            this.onSaveSuccess(res), (res: Response) => this.onSaveError());
    }

    private onSaveSuccess(result: FormDTO) {
        this.eventManager.broadcast({ name: 'journalListModification', content: 'OK'});
        this.isSaving = false;
        this.activeModal.dismiss(result);
    }

    private onSaveError() {
        this.isSaving = false;
    }
}

@Component({
    selector: 'jhi-apiDosage-first-step-popup',
    template: ''
})
export class ApiDosageDialogFirstStepPopupComponent implements OnInit, OnDestroy {

    routeSub: any;
    formDTO: any;
    subscription: Subscription;

    constructor(
        private route: ActivatedRoute,
        private apiDosagePopupService: ApiDosageDialogFirstStepPopupService,
        private apiDosageDialogFormCommunicationService: ApiDosageDialogFormCommunicationService
    ) {

    }

    ngOnInit() {
        this.subscription = this.apiDosageDialogFormCommunicationService.formDTOpulling$.subscribe(
            formDTO => {
                 console.log('In the component' +this.formDTO.sample.id),
                 this.formDTO = formDTO;
             },
             error => {
                 alert('Made it all the way here: '+this.formDTO);
             });
        this.routeSub = this.route.params.subscribe((params) => {
            this.apiDosagePopupService
                    .open(ApiDosageDialogFirstStepComponent as Component, this.formDTO);
        });
    }

    ngOnDestroy() {
        this.routeSub.unsubscribe();
    }
}

请注意，在上一课中，我尝试在 onInit 和构造函数中添加 subscribe 方法.

Please note that in the previous class, I've tried adding the subscribe method in both onInit and in the constructors.

前面的类调用了modal的open方法，是modal的service的源码:

The previous class calls open method of the modal, being this the source code for the modal's service:

import { Injectable, Component } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import {FormService} from "./form.service";
import {FormDTO} from "../dto/formDTO.model";
import {Observable} from "rxjs/Observable";

@Injectable()
export class ApiDosageDialogFirstStepPopupService {
    private ngbModalRef: NgbModalRef;

    constructor(
        private modalService: NgbModal,
        private router: Router,
        private formService: FormService

    ) {
        this.ngbModalRef = null;
    }

    open(component: Component, formDTO?: Observable<any> | any): Promise<NgbModalRef> {
        return new Promise<NgbModalRef>((resolve, reject) => {
            const isOpen = this.ngbModalRef !== null;
            if (isOpen) {
                resolve(this.ngbModalRef);
            }
            if (formDTO) {
                  // this.formService.find(id).subscribe((journal) => {
                  //     this.ngbModalRef = this.journalModalRef(component, journal);
                  //     resolve(this.ngbModalRef);
                  // });
                setTimeout(() => {
                    this.ngbModalRef = this.apiDosageFirstStepModalRef(component, formDTO);
                         resolve(this.ngbModalRef);
                         console.log(formDTO);
                }, 0);
                } else {
                 //setTimeout used as a workaround for getting ExpressionChangedAfterItHasBeenCheckedError
                 setTimeout(() => {
                     this.ngbModalRef = this.apiDosageFirstStepModalRef(component, new Observable<any>());
                     resolve(this.ngbModalRef);
                 }, 0);
                alert('no form');
            }
        });
    }

    apiDosageFirstStepModalRef(component: Component, formDTO: Observable<any>): NgbModalRef {
        const modalRef = this.modalService.open(component, { size: 'lg', backdrop: 'static'});
        modalRef.componentInstance.formDTO = formDTO;
        modalRef.result.then((result) => {
            this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true, queryParamsHandling: 'merge' });
            this.ngbModalRef = null;
        }, (reason) => {
            this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true, queryParamsHandling: 'merge' });
            this.ngbModalRef = null;
        });
        return modalRef;
    }
}

推荐答案

发生的情况是 formDTOpushing 在组件订阅之前被调用.这意味着组件将不会收到该值.订阅 Subject 的组件只接收订阅后发出的值.(他们最初订阅时没有收到值)

What is happening is formDTOpushing is being called before the components subscribe. This means the components will not receive that value. Components that subscribe to a Subject only receive values that are emitted after they subscribe. (They do not receive a value when they initially subscribe)

要让组件在订阅时接收先前发出的值，请使用 BehaviorSubject 或 ReplaySubject 而是

To have the the components receive previous emitted value(s) on subscribe, use a BehaviorSubject or ReplaySubject instead

这篇关于Rxjs 订阅方法被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！