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
So, after getting a reply to a previous question I started using rxjs following everything stated on the guide I was provided with
但是，由于未触发订阅方法，我很快又陷入了最后几个小时的困境.
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和构造函数中添加subscription方法.
Please note that in the previous class, I've tried adding the subscribe method in both onInit and in the constructors.
上一类调用模态的open方法，这是模态服务的源代码:
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)
要使组件在订阅时接收先前发出的值，请使用行为主体或 ReplaySubject 代替
To have the the components receive previous emitted value(s) on subscribe, use a BehaviorSubject or ReplaySubject instead
这篇关于Rxjs订阅方法被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
