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

Question

我正在尝试在 jhipster 生成的 Angular 5 应用程序上使用另一个component上的module。

当导入包含要使用的module的{​​{1}}时，发生导入的component的{​​{1}}被{{1}覆盖}导入的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

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

Answer 1

我设法解决了这个问题。实际上，它看起来更像是一种变通方法，而不是一种适当的解决方案，但是可以完成工作。

结果证明Angular非常关心如何处理routes，并且（显然）导出route的正确方法是导出为class而不是{{1 }}。另外，由于Angular bug，constant必须在模块之前 导入。

`contact-info.route.ts

route

contact-info.module.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 { }

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