在Angular / JHipster应用程序上使用另一个模块的组件

Question

我正试图在jhipster生成的Angular 5应用程序中使用来自另一个component的module。

当包含我想要使用的module的component被导入时，进口发生的route的module被进口的route的module覆盖。

• phone.module.ts出口PhoneComponent。
• contact-info.module.ts进口phone.module.ts。
• 在那之后，在route宣布的每个contact-info.route.ts开始呈现在phone.module.ts中声明的组件。电话模块似乎被完全覆盖。

phone.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    PhoneComponent,
    PhoneDetailComponent,
    PhoneUpdateComponent,
    PhoneDeletePopupComponent,
    PhoneDeleteDialogComponent,
    phoneRoute,
    phonePopupRoute
} from './';

const ENTITY_STATES = [...phoneRoute, ...phonePopupRoute];

@NgModule({
    imports: [FrontendSharedModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [PhoneComponent, PhoneDetailComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    entryComponents: [PhoneComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    exports: [PhoneComponent]
})
export class BurocracyPhoneModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

contact-info.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent,
    contactInfoRoute,
    contactInfoPopupRoute
} from './';
import { BurocracyPhoneModule } from 'app/entities/burocracy/phone/phone.module';

const ENTITY_STATES = [...contactInfoRoute, ...contactInfoPopupRoute];

@NgModule({
    imports: [FrontendSharedModule, BurocracyPhoneModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

http://localhost:8080/#/contact-info在进口BurocracyPhoneModule 之前

http://localhost:8080/#/contact-info进口BurocracyPhoneModule 后

Other files that may have some relation with the issue

所有以下文件都由jhipster提供。

phone.route.ts

import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { Phone } from 'app/shared/model/burocracy/phone.model';
import { PhoneService } from './phone.service';
import { PhoneComponent } from './phone.component';
import { PhoneDetailComponent } from './phone-detail.component';
import { PhoneUpdateComponent } from './phone-update.component';
import { PhoneDeletePopupComponent } from './phone-delete-dialog.component';
import { IPhone } from 'app/shared/model/burocracy/phone.model';

@Injectable({ providedIn: 'root' })
export class PhoneResolve implements Resolve<IPhone> {
    constructor(private service: PhoneService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IPhone> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<Phone>) => response.ok),
                map((phone: HttpResponse<Phone>) => phone.body)
            );
        }
        return of(new Phone());
    }
}

export const phoneRoute: Routes = [
    {
        path: '',
        component: PhoneComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: PhoneDetailComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const phonePopupRoute: Routes = [
    {
        path: ':id/delete',
        component: PhoneDeletePopupComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

contact-info.route.ts

import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ContactInfo } from 'app/shared/model/burocracy/contact-info.model';
import { ContactInfoService } from './contact-info.service';
import { ContactInfoComponent } from './contact-info.component';
import { ContactInfoDetailComponent } from './contact-info-detail.component';
import { ContactInfoUpdateComponent } from './contact-info-update.component';
import { ContactInfoDeletePopupComponent } from './contact-info-delete-dialog.component';
import { IContactInfo } from 'app/shared/model/burocracy/contact-info.model';

@Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}

export const contactInfoRoute: Routes = [
    {
        path: '',
        component: ContactInfoComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: ContactInfoDetailComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const contactInfoPopupRoute: Routes = [
    {
        path: ':id/delete',
        component: ContactInfoDeletePopupComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

entity.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
    imports: [
        RouterModule.forChild([

            {
                path: 'contact-info',
                loadChildren: './burocracy/contact-info/contact-info.module#BurocracyContactInfoModule'
            },
            {
                path: 'phone',
                loadChildren: './burocracy/phone/phone.module#BurocracyPhoneModule'
            }
            /* jhipster-needle-add-entity-route - JHipster will add entity modules routes here */
        ])
    ],
    declarations: [],
    entryComponents: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FrontendEntityModule {}

Answer 1

我设法解决了这个问题。实际上，它看起来更像是一种解决方法，就像一个正确的解决方案，但它完成了工作。

原来Angular非常讲究如何处理routes和（显然）正确的出口route的方式是出口class而不是constant。此外，由于Angular bug，route必须在模块之前导入。

`接触info.route.ts

@Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}
// constants are not imported anymore
const contactInfoRoute: Routes = [
   // ...
]
const contactInfoPopupRoute: Routes = [
   // ...
]
// This is the juice part
const ROUTE = [...contactInfoRoute, ...contactInfoPopupRoute];
@NgModule({
    imports: [RouterModule.forChild(ROUTE)],
    exports: [RouterModule]
})
export class InfoRoute { }

接触info.module.ts

import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent, 
    InfoRoute
} from './';

@NgModule({
    imports: [
        // importing routes as a class
        InfoRoute,
        BurocracyPhoneModule,
        FrontendSharedModule
    ],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

我对这个解决方案并不满意，因为我认为它不是很优雅，但它对我有用。如果有人有其他办法解决此问题，请与我们分享。