在Angular/JHipster应用程序中使用另一个模块的组件 [英] Using Components from Another Module on a Angular/JHipster Application
问题描述
我正在尝试在 jhipster 生成的 Angular 5 应用程序上使用另一个module
中的component
.
当导入包含要使用的component
的module
时,发生导入的module
的route
被导入的module
的route
覆盖.>
-
phone.module.ts
导出PhoneComponent
. -
contact-info.module.ts
导入phone.module.ts
. - 此后,在
contact-info.route.ts
中声明的每个route
开始渲染在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
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 {}
我设法解决了该问题.实际上,它看起来更像是一种变通方法,而不是一种适当的解决方案,但它可以完成工作.
结果证明Angular非常关心如何处理routes
,并且(显然)导出route
的正确方法是导出为class
而不是constant
.另外,由于角度错误,必须在之前导入route
模块.
`contact-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 { }
contact-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);
}
});
}
}
我对这种解决方案不是很满意,因为我认为它不是很优雅,但是它对我有用.如果有人有其他解决此问题的方法,请与我们分享.
I'm trying to use a component
from another module
on an Angular 5 application generated by jhipster.
When a module
that contains the component
that I want to use is imported the route
of the module
where the importing occurred is overwritten by the route
of the imported module
.
phone.module.ts
exportsPhoneComponent
.contact-info.module.ts
importphone.module.ts
.- After that, every
route
declared incontact-info.route.ts
starts to render the components declared in thephone.module.ts
. It appears the phone module is completely overwritten.
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
Before the importing of BurocracyPhoneModule
http://localhost:8080/#/contact-info
After the importing of BurocracyPhoneModule
Other files that may have some relation with the issue
All of the following files where gerenerated by 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 {}
I managed to fix the problem. Actually, it looks more like a workaround then like a proper solution, but it gets the job done.
Turns out Angular is very particular about how to deal with routes
and (apparently) the proper way to export a route
is exporting as a class
and not as a constant
. Also, due to an Angular bug the route
must be imported before the module.
`contact-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 { }
contact-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);
}
});
}
}
I'm not really happy with this solution since I don't consider it really elegant, but it is working for me. If anyone has another approach to solve this issue, please share with us.
这篇关于在Angular/JHipster应用程序中使用另一个模块的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!