我一直收到上面提到的错误消息,但我找不到任何关于此提供者的文献。
我一直试图在表单中调用模态以收集返回变量并在表单中表示它,返回值来自其Save方法
我感觉错误可能来自于modal Component
扩展Component
,因此可以通过open()
中的pop-up-service
方法调用它。
模态:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { NgbActiveModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager, JhiAlertService } from 'ng-jhipster';
import { Publication } from './publication.model';
import { PublicationPopupService } from './publication-popup.service';
import { PublicationService } from './publication.service';
import { PublicationType, PublicationTypeService } from '../publication-type';
import {ResponseWrapper} from '../../shared/model/response-wrapper.model';
@Component({
selector: 'jhi-publication-dialog',
templateUrl: './publication-dialog.component.html'
})
export class PublicationDialogComponent extends Component implements OnInit{
title: string;
message: string;
publication: Publication;
isSaving: boolean;
publicationTypes: PublicationType[];
constructor(
public activeModal: NgbActiveModal,
private alertService: JhiAlertService,
private publicationService: PublicationService,
private componentService: Component,
private publicationTypeService: PublicationTypeService,
private eventManager: JhiEventManager
) {
super(componentService);
}
ngOnInit() {
this.isSaving = false;
this.publicationTypeService.query()
.subscribe((res: ResponseWrapper) => {this.publicationTypes = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
}
clear() {
this.activeModal.dismiss('cancel');
}
save() {
this.isSaving = true;
if (this.publication.id !== undefined) {
this.subscribeToSaveResponse(
this.publicationService.update(this.publication));
} else {
this.subscribeToSaveResponse(
this.publicationService.create(this.publication));
}
return this.publication
}
private subscribeToSaveResponse(result: Observable<Publication>) {
result.subscribe((res: Publication) =>
this.onSaveSuccess(res), (res: Response) => this.onSaveError(res));
}
private onSaveSuccess(result: Publication) {
this.eventManager.broadcast({ name: 'publicationListModification', content: 'OK'});
this.isSaving = false;
this.activeModal.dismiss(result);
}
private onSaveError(error) {
try {
error.json();
} catch (exception) {
error.message = error.text();
}
this.isSaving = false;
this.onError(error);
}
private onError(error) {
this.alertService.error(error.message, null, null);
}
trackPublicationTypeById(index: number, item: PublicationType) {
return item.id;
}
}
@Component({
selector: 'jhi-publication-popup',
template: ''
})
export class PublicationPopupComponent implements OnInit, OnDestroy {
routeSub: any;
constructor(
private route: ActivatedRoute,
private publicationPopupService: PublicationPopupService
) {}
ngOnInit() {
this.routeSub = this.route.params.subscribe((params) => {
if ( params['id'] ) {
console.log(params);
this.publicationPopupService
.open(PublicationDialogComponent as Component, params['id']);
} else {
console.log(params);
this.publicationPopupService
.open(PublicationDialogComponent as Component);
}
});
}
ngOnDestroy() {
var pub = this.routeSub;
this.route.params.subscribe((params) => {
console.log(params);
});
this.routeSub.unsubscribe();
}
}
popup.service:
import { Injectable, Component } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Publication } from './publication.model';
import { PublicationService } from './publication.service';
@Injectable()
export class PublicationPopupService {
private ngbModalRef: NgbModalRef;
constructor(
private modalService: NgbModal,
private router: Router,
private publicationService: PublicationService
) {
this.ngbModalRef = null;
}
open(component: Component, id?: number | any): Promise<NgbModalRef> {
return new Promise<NgbModalRef>((resolve, reject) => {
const isOpen = this.ngbModalRef !== null;
if (isOpen) {
resolve(this.ngbModalRef);
console.log('in isOpen '+this.ngbModalRef);
}
if (id) {
this.publicationService.find(id).subscribe((publication) => {
this.ngbModalRef = this.publicationModalRef(component, publication);
resolve(this.ngbModalRef);
console.log('in if id '+publication);
});
} else {
// setTimeout used as a workaround for getting ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.ngbModalRef = this.publicationModalRef(component, new Publication());
resolve(this.ngbModalRef);
console.log('in else '+this.ngbModalRef.componentInstance.publication);
}, 0);
}
});
}
publicationModalRef(component: Component, publication: Publication): NgbModalRef {
const modalRef = this.modalService.open(component, { size: 'lg', backdrop: 'static'});
console.log(modalRef);
modalRef.componentInstance.publication = publication;
modalRef.result.then((result) => {
this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true });
this.ngbModalRef = null;
}, (reason) => {
this.router.navigate([{ outlets: { popup: null }}], { replaceUrl: true });
this.ngbModalRef = null;
});
return modalRef;
}
}
form.module.ts:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DrugQualityDataManagerSharedModule } from '../shared';
import {formRoute} from './form.route';
import {FormComponent} from './form.component';
import {FormService} from './form.service';
import { NguiAutoCompleteModule } from '@ngui/auto-complete';
import { BootstrapModalModule } from 'ng2-bootstrap-modal';
import {NgbModule, NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {
PublicationDialogComponent,
PublicationPopupComponent
} from "../entities/publication/publication-dialog.component";
const ENTITY_STATES = [
...formRoute,
];
@NgModule({
imports: [
DrugQualityDataManagerSharedModule,
NguiAutoCompleteModule,
BootstrapModalModule,
NgbModule.forRoot(),
RouterModule.forRoot(ENTITY_STATES, { useHash: true })
],
declarations: [
FormComponent,
],
entryComponents: [
FormComponent,
],
providers: [
FormService,
NgbActiveModal,
PublicationDialogComponent,
PublicationPopupComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DrugQualityDataManagerFormModule {}
表格中的相关方法:
newPublication() {
this.publicationPopupService.open(this.publicationDialogComponent).then(
(result) => alert('result'),
(error) => alert('error'));}
整个表格:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiPaginationUtil, JhiAlertService } from 'ng-jhipster';
import { FormService } from './form.service';
import {Publication, PublicationService} from '../entities/publication'
import {Country, CountryService} from '../entities/country'
import {Location, LocationService} from '../entities/location'
import {InnDrug, InnDrugService} from '../entities/inn-drug'
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../shared';
import { PaginationConfig } from '../blocks/config/uib-pagination.config';
import {FormDTO} from './formDTO.model';
import {PublicationType} from '../entities/publication-type/publication-type.model';
import {PublicationTypeService} from '../entities/publication-type/publication-type.service';
import {PublicationDialogComponent, PublicationPopupComponent } from "../entities/publication/publication-dialog.component";
import { DialogService } from "ng2-bootstrap-modal";
import {publicationDrugTypesPopupRoute} from "../entities/publication-drug-types/publication-drug-types.route";
import {PublicationPopupService} from "../entities/publication/publication-popup.service";
@Component({
selector: 'jhi-form',
templateUrl: './uploadData.html'
})
export class FormComponent implements OnInit, OnDestroy {
publication: any;
isSaving: boolean;
eventSubscriber: Subscription;
publicationId;
publications: Publication[];
countries: Country[];
locations: Location[];
innDrugs: InnDrug[];
formDTO: FormDTO;
publicationTypes: PublicationType[];
formDTOLoaded = false;
dataLoad = false;
publicationDialogComponent: PublicationDialogComponent;
publicationPopupComponent: PublicationPopupComponent;
constructor(
private alertService: JhiAlertService,
private publicationService: PublicationService,
private publicationPopupService: PublicationPopupService,
private countryService: CountryService,
private locationService: LocationService,
private innDrugService: InnDrugService,
private publicationTypeService: PublicationTypeService,
private formService: FormService,
public dialogService:DialogService,
private eventManager: JhiEventManager
) {
}
ngOnInit() {
this.registerChangeInForm();
this.loadAll();
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
loadAll() {
this.isSaving = false;
this.publicationService.queryAll().subscribe((res: ResponseWrapper) => {this.publications = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
this.countryService.query().subscribe((res: ResponseWrapper) => {this.countries = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
this.locationService.query().subscribe((res: ResponseWrapper) => {this.locations = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
this.innDrugService.query().subscribe((res: ResponseWrapper) => {this.innDrugs = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
this.publicationTypeService.query().subscribe((res: ResponseWrapper) => {this.publicationTypes = res.json; }, (res: ResponseWrapper) => this.onError(res.json));
}
save() {
console.log('save');
}
uploadNewData() {
this.dataLoad = true;
this.formDTOLoaded = false;
this.publicationId = null;
}
search(publication) {
console.log(publication);
this.formService.find(publication.id).subscribe(
(result) => (this.formDTO = result, this.formDTOLoaded = true),
(error) => (alert('Publication with Id:' + publication.id + ' was not found in Database'), this.formDTOLoaded = false));
this.loadAll();
}
registerChangeInForm() {
this.eventSubscriber = this.eventManager.subscribe('formListModification', (response) => this.loadAll());
}
trackPublicationTypeById(index: number, item: PublicationType) {
return item.id;
}
private onError(error) {
this.alertService.error(error.message, null, null);
}
newPublication() {
this.publicationPopupService.open(this.publicationDialogComponent).then(
(result) => alert('result'),
(error) => alert('error'));}
我真的不知道从哪里开始为此构建一个plunker,希望有人会遇到同样的错误,甚至不需要查看代码块?