網站搜尋

typescript - 在 Angular/JHipster 應用程式中使用來自其他模組的元件

我正在嘗試在由 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 {}

答案＃1

我設法解決了這個問題。實際上，它看起來更像是一種權宜之計，而不像是正式的解決方案，但它能完成工作。

結果發現 Angular 對如何處理 routes 非常講究，（顯然）正確的導出 route 的方式是作為 class 導出，而不是作為 constant。此外，由於 Angular 的一個錯誤，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);
            }
        });
    }
}

我對這個解決方案並不太滿意，因為我不認為它真的很優雅，但它對我來說是可行的。如果有人有其他方法來解決這個問題，請與我們分享。