没有DecoratorFactory的提供者

时间:2017-09-12 13:17:10

标签: angular typescript modal-dialog angular-forms

我一直收到上面提到的错误消息,但我找不到任何关于此提供者的文献。

我一直试图在表单中调用模态以收集返回变量并在表单中表示它,返回值来自其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,希望有人会遇到同样的错误,甚至不需要查看代码块?

0 个答案:

没有答案