markdown JHipster - 在Angular上导入模块

Posted 2021-05-05

# Importing Angular Modules
How to import *Angular* modules created by *JHipster Entities*,
in a manner that is possible to visualize more than one module.

## Example
`EntityA` is related to `EntityB` and the application needs to show then together.

- *Export* on `EntityB`'s module the components that you need to use on `EntityA`.
- Import *Module* `EntityB` on `EntityA` module.
- Adjust *entities* routes, in a way that modules `EntityA` and `EntityB` will load together.
- Adjust *routes* of `EntityA` and `EntityB`, giving then a specific domain name.
- Adjust `EntityA` and `EntityB` components to consider the new route.
 
## Export components
### `entity-b.module.ts`
``` typescript
import { RouterModule } from '@angular/router';

@NgModule({
  // import RouterModule
  imports: [RouterModule],
  // Export the components you pretend to use
  exports: [ComponentB]
})
````

## Import Module
``` typescript
#NgModule({
  imports: [EntityBModule]
})
export class EntityAModule {}
```

## Module Organizing the Relationship
Create a new module with routes to organize the `Routes` and loading of the related entities.
### `entity-organizer.routes.ts`
``` typescript
import { Routes } from '@angular/router';
import { JhiResolvePagingParams } from 'ng-jhipster';

// create a mais path for entities A and B and organize all its children
export const route: Routes = [
  {   
    path: 'entity-a',
        children: [
            {
                path: '',
                component: EntityAComponent,
                resolve: {
                    pagingParams: JhiResolvePagingParams
                },
                data: {
                    authorities: ['ROLE_USER'],
                    defaultSort: 'id,asc',
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: ':id/view',
                component: EntityADetailComponent,
                resolve: {
                    institution: EntityAnResolve
                },
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: 'new',
                component: EntityAUpdateComponent,
                resolve: {
                    institution: EntityAResolve
                },
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: ':id/edit',
                component: EntityAUpdateComponent,
                resolve: {
                    institution: EntityAResolve
                },
                data: {
                    authorities: ['ROLE_ADMIN', 'ROLE_INSTITUTION_ADMIN'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: 'entity-a/:id/delete',
                component: EntityADeletePopupComponent,
                resolve: {
                    institution: EntityAResolve
                },
                data: {
                    authorities: ['ROLE_ADMIN', 'ROLE_INSTITUTION_ADMIN'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService],
                outlet: 'popup'
            },
            // since entity-b is imported by entity-b, it must contain entity-b delete route
            {
                path: 'entity-b/:id/delete',
                component: EntityBDeletePopupComponent,
                resolve: {
                    institution: EntityBResolve
                },
                data: {
                    authorities: ['ROLE_ADMIN', 'ROLE_INSTITUTION_ADMIN'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService],
                outlet: 'popup'
            }
        ]
  },
  {   
    path: 'entity-b',
        children: [
            {
                path: '',
                component: EntityBComponent,
                resolve: {
                    pagingParams: JhiResolvePagingParams
                },
                data: {
                    authorities: ['ROLE_USER'],
                    defaultSort: 'id,asc',
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: ':id/view',
                component: EntityBDetailComponent,
                resolve: {
                    institution: EntityBResolve
                },
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: 'new',
                component: EntityBUpdateComponent,
                resolve: {
                    institution: EntityBResolve
                },
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: ':id/edit',
                component: EntityBUpdateComponent,
                resolve: {
                    institution: EntityAResolve
                },
                data: {
                    authorities: ['ROLE_ADMIN', 'ROLE_INSTITUTION_ADMIN'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService]
            },
            {
                path: 'entity-b/:id/delete',
                component: EntityBDeletePopupComponent,
                resolve: {
                    institution: EntityBResolve
                },
                data: {
                    authorities: ['ROLE_ADMIN', 'ROLE_INSTITUTION_ADMIN'],
                    pageTitle: 'frontendApp.burocracyInstitution.home.title'
                },
                canActivate: [UserRouteAccessService],
                outlet: 'popup'
            }
        ]
  },
];
```
### `entity-organizer.module.ts`
``` typescript
@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        RouterModule,
        // import route from route-organizer.routes.ts
        RouterModule.forChild(route),
        // Modules A and B
        EntityAModule,
        EntityBModule
    ]
})
export class EntityOrganizerModule {}
```

## Adjust LazyLoading
Edit `entity.module.ts`
``` typescript
@NgModule({
  imports: [
    RouterModule.forChild([
      path: 'entityA',
      loadChildren: './entity-organizer.module#EntityOrganizerModule'
    ])
  ]
})
```

## Adjust Imported Entity
### `entity-b.component.ts`
``` typescript
@Component({
    selector: 'jhi-entity-b',
    templateUrl: './entity-b.component.html'
})
export class EntityBComponent implements OnInit, OnDestroy {
  // entityB root url
    @Input() rootUrl: string;
    // url that should be used to find outlet routes
    @Input() urlPath: string;
}
```
### `entity-b.component.html`
``` html
<!-- Button NEW -->
<button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-entity-b"
    [routerLink]="[rootUrl+'/new']">
    <fa-icon [icon]="'plus'"></fa-icon>
  <span  jhiTranslate="frontendApp.burocracyPhone.home.createLabel">
    Create new Phone
  </span>
</button>
<!-- Button EDIT -->
  <button type="submit"
    [routerLink]="[rootUrl, entity-b.id, 'edit']"
    class="btn btn-primary btn-sm">
  <fa-icon [icon]="'pencil-alt'"></fa-icon>
</button>
<!-- Button DELETE -->
<button type="submit"
  [routerLink]="[
    urlPath,
    { outlets: { popup: 'entity-b/' + entity-b.id + '/delete'} }]"
    replaceUrl="true"
    queryParamsHandling="merge"
    class="btn btn-danger btn-sm">
  <fa-icon [icon]="'times'"></fa-icon>
</button>
```
### `entity-b-delete-dialog.component.ts`
``` typescript
    // adjust how the url used for redirect
    ngOnInit() {
        this.activatedRoute.data.subscribe(({ phone }) => {
            setTimeout(() => {
                this.ngbModalRef = this.modalService.open(PhoneDeleteDialogComponent as Component, { size: 'lg', backdrop: 'static' });
                this.ngbModalRef.componentInstance.phone = phone;
                const url = getCurrent(this.activatedRoute);
                this.ngbModalRef.result.then(
                    result => {
                        this.router.navigate([url, { outlets: { popup: null } }]);
                        this.ngbModalRef = null;
                    },
                    reason => {
                        this.router.navigate([url, { outlets: { popup: null } }]);
                        this.ngbModalRef = null;
                    }
                );
            }, 0);
        });
    }
    
    public getCurrent(activatedRoute: ActivatedRoute): string {
        // getting current url path
        const routesArray = activatedRoute.pathFromRoot;
        let url = '';
        for (let i = 1; i < routesArray.length - 1; i++) {
            url += routesArray[i].snapshot.routeConfig.path + '/';
        }
        return url;
    }
```

## User Imported Entity Selector
### ` entity-a.component.html`
``` html
<jhi-entity-b rootUrl="/entity-organizer" urlPath="/entity-organizer/entity-b">
</jhi-entity-b>
```