Angular 8：跨延迟加载的模块共享组件状态

我有主应用程序模块和几个延迟加载的模块。有一个侧菜单控制整个应用程序导航，一切正常，但每次我从一个模块切换到下一个延迟加载的模块时，整个菜单重新加载，菜单活动项状态重置，用户必须再次单击侧菜单以在链接之间切换。加载模块后，在第二次单击侧菜单后，该模块工作（侧菜单保持打开状态，显示用户单击->状态保留的位置），但只要他单击到另一个模块的链接路由，侧菜单就会关闭

非常感谢您的帮助

这是当路由到同一模块的另一页时，状态保持不变

*只要我们点击到另一个模块组件的路由，菜单就会重置，用户无法知道他选择了哪个模块*

主应用程序路由文件

export const routes: Routes = [

    {

    path: '', component: AppMainComponent,
    canActivate: [AuthGuard],
    children: [

        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

        { path: 'dashboard', component: DashboardComponent },

           ]
},

{ path: 'regional-hierarchy', loadChildren: './regionalhierarchy/regionalhierarchy.module#RegionalhierarchyModule' },
{ path: 'product', loadChildren: './product/product.module#ProductModule' },
{ path: 'pricing', loadChildren: './pricing/pricing.module#PricingModule' },
{ path: 'distributory', loadChildren: './distribution/distribution.module#DistributionModule' },
{ path: 'stock', loadChildren: './stock/stock.module#StockModule' },
{ path: 'factory', loadChildren: './factory/factory.module#FactoryModule' },
{ path: 'sole', loadChildren: './sole/sole.module#SoleModule' },
{ path: 'shopcredit', loadChildren: './shopcredit/shopcredit.module#ShopcreditModule' },
// { path: 'shop', loadChildren: './shops/shops.module#ShopsModule' },
{ path: 'stock', loadChildren: './stock/stock.module#StockModule' },

{ path: 'error', component: AppErrorComponent },
{ path: 'accessdenied', component: AppAccessdeniedComponent },
{ path: '404', component: AppNotfoundComponent },
{ path: '**', redirectTo: '/404' },

];

export const AppRoutes: ModuleWithProviders = 
RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });

const routes = [
{
 path: '',
 component: RegionalhomeComponent,
 canActivate: [AdminGuard],
 children: [
  { path: 'createRegion', component: CreateRegionComponent },
  { path: 'viewRegions', component: ViewRegionsComponent },
  { path: 'createZone', component: CreateZoneComponent },
  { path: 'viewZones', component: ViewZonesComponent },
  { path: 'createArea', component: CreateAreaComponent },
  { path: 'viewAreas', component: ViewAreasComponent },
  { path: 'createTerritory', component: CreateTerritoryComponent },
  { path: 'viewTerritories', component: ViewTerritoriesComponent },
  { path: 'createCity', component: CreateCityComponent },
  { path: 'viewCities', component: ViewCitiesComponent },
  { path: 'createTown', component: CreateTownComponent },
  { path: 'viewTowns', component: ViewTownsComponent },
  { path: 'createRoute', component: CreateRouteComponent },
  { path: 'viewRoutes', component: ViewRoutesComponent },
  { path: '', component: RegionalhomeComponent }
  ]
 }
]

@NgModule({
 declarations: [],
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ]
})
export class RegionalhierarchyRoutingModule { }

延迟加载模块的路由文件

export const routes: Routes = [

    {

    path: '', component: AppMainComponent,
    canActivate: [AuthGuard],
    children: [

        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

        { path: 'dashboard', component: DashboardComponent },

           ]
},

{ path: 'regional-hierarchy', loadChildren: './regionalhierarchy/regionalhierarchy.module#RegionalhierarchyModule' },
{ path: 'product', loadChildren: './product/product.module#ProductModule' },
{ path: 'pricing', loadChildren: './pricing/pricing.module#PricingModule' },
{ path: 'distributory', loadChildren: './distribution/distribution.module#DistributionModule' },
{ path: 'stock', loadChildren: './stock/stock.module#StockModule' },
{ path: 'factory', loadChildren: './factory/factory.module#FactoryModule' },
{ path: 'sole', loadChildren: './sole/sole.module#SoleModule' },
{ path: 'shopcredit', loadChildren: './shopcredit/shopcredit.module#ShopcreditModule' },
// { path: 'shop', loadChildren: './shops/shops.module#ShopsModule' },
{ path: 'stock', loadChildren: './stock/stock.module#StockModule' },

{ path: 'error', component: AppErrorComponent },
{ path: 'accessdenied', component: AppAccessdeniedComponent },
{ path: '404', component: AppNotfoundComponent },
{ path: '**', redirectTo: '/404' },

];

export const AppRoutes: ModuleWithProviders = 
RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });

const routes = [
{
 path: '',
 component: RegionalhomeComponent,
 canActivate: [AdminGuard],
 children: [
  { path: 'createRegion', component: CreateRegionComponent },
  { path: 'viewRegions', component: ViewRegionsComponent },
  { path: 'createZone', component: CreateZoneComponent },
  { path: 'viewZones', component: ViewZonesComponent },
  { path: 'createArea', component: CreateAreaComponent },
  { path: 'viewAreas', component: ViewAreasComponent },
  { path: 'createTerritory', component: CreateTerritoryComponent },
  { path: 'viewTerritories', component: ViewTerritoriesComponent },
  { path: 'createCity', component: CreateCityComponent },
  { path: 'viewCities', component: ViewCitiesComponent },
  { path: 'createTown', component: CreateTownComponent },
  { path: 'viewTowns', component: ViewTownsComponent },
  { path: 'createRoute', component: CreateRouteComponent },
  { path: 'viewRoutes', component: ViewRoutesComponent },
  { path: '', component: RegionalhomeComponent }
  ]
 }
]

@NgModule({
 declarations: [],
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ]
})
export class RegionalhierarchyRoutingModule { }

**主应用程序组件HTML**

<div class="layout-wrapper" [ngClass]="{'layout-horizontal': menuMode === 'horizontal',
'layout-overlay': menuMode === 'overlay',
'layout-static': menuMode === 'static',
'layout-slim': menuMode === 'slim',
'layout-menu-light': lightMenu === true,
'layout-menu-dark': lightMenu === false,
'layout-overlay-active': overlayMenuActive,
'layout-mobile-active': staticMenuMobileActive,
'layout-static-inactive': staticMenuDesktopInactive,
'layout-rtl': isRTL}" [class]="topbarColor" (click)="onLayoutClick()">
<app-topbar></app-topbar>

<app-menu [reset]="resetMenu"></app-menu>
<app-right-menu></app-right-menu>

<div class="layout-main">
    <div class="layout-content">
        <router-outlet></router-outlet>
    </div>
</div>

<div class="layout-content-mask"></div>

这上面是app.main.component

       { label: 'Home', icon: 'pi pi-fw pi-home', routerLink: ['/'] },
        {
            label: 'Sale', icon: 'pi pi-fw pi-copy',
            items: [
                {
                    label: 'Territorial Structure', icon: 'pi pi-fw pi-clone',
                    skipLocationChange: true,
                    items: [
                        {
                            label: 'Region', icon: 'pi pi-fw pi-sign-in',
                            items: [
                                {
                                    label: 'Add Region', icon: 'pi pi-fw pi-plus', routerLink: ['/regional-hierarchy/createRegion'],
                                },
                                {
                                    label: 'View Regions', icon: 'pi pi-fw pi-window-maximize', routerLink: ['/regional-hierarchy/viewRegions'],
                                    queryParams: { 'recent': 'true' },
                                    routerLinkActiveOptions: "{exact: true}",
                                    command: (event) => {
                                        //event.originalEvent: Browser event

                                        //event.item: menuitem metadata
                                    },
                                    target: '_blank'
                                }
                            ]
                        },
                        {
                            label: 'Zone', icon: 'pi pi-fw pi-sign-in',
                            items: [
                                { label: 'Add Zone', icon: 'pi pi-fw pi-plus', routerLink: ['/regional-hierarchy/createZone'], target: '_blank' },
                                { label: 'View Zones', icon: 'pi pi-fw pi-window-maximize', routerLink: ['/regional-hierarchy/viewZones'], target: '_blank' }
                            ]
                        },
                        {
                            label: 'Area', icon: 'pi pi-fw pi-sign-in',
                            items: [
                                { label: 'Add Area', icon: 'pi pi-fw pi-plus', routerLink: ['/regional-hierarchy/createArea'], target: '_blank' },
                                { label: 'View Areas', icon: 'pi pi-fw pi-window-maximize', routerLink: ['/regional-hierarchy/viewAreas'], target: '_blank' }
                            ]
                        },
                        {
                            label: 'Territory', icon: 'pi pi-fw pi-sign-in',
                            items: [
                                { label: 'Add Territory', icon: 'pi pi-fw pi-plus', routerLink: ['/regional-hierarchy/createTerritory'], target: '_blank' },
                                { label: 'View Territories', icon: 'pi pi-fw pi-window-maximize', routerLink: ['/regional-hierarchy/viewTerritories'], target: '_blank' }
                            ]
                        },

<router-outlet></router-outlet>

---

我不得不将延迟加载模块的路由移动到主路由的子数组中，这解决了问题。谢谢大家

 {

    path: '', component: AppMainComponent,
    canActivate: [AuthGuard],
    children: [

        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

        { path: 'dashboard', component: DashboardComponent },

        { path: 'create-dist-trade-offer', canActivate: [AdminGuard], component: CreateDistTradeOfferComponent },
        { path: 'create-dist-trade-offer', canActivate: [AdminGuard], component: CreateDistTradeOfferComponent },
        { path: 'distribution-trade-offers', component: TraderOfferComponent },
        { path: 'multiple-distribution-trade-offers', canActivate: [AdminGuard], component: DistTradeOfferComponent },
        { path: 'multiple-sole-trade-offers', canActivate: [AdminGuard], component: SoleMultipleTradeOfferComponent },
        { path: 'sole-trade-offers', component: SoleTradeOfferComponent },
        { path: 'create-sole-trade-offer', canActivate: [AdminGuard], component: CreateSoleTradeOfferComponent },
        { path: 'edit-sole-trade-offer', canActivate: [AdminGuard], component: EditSoleTradeOfferComponent },
        { path: 'create-primary-order', component: CreatePrimaryOrderComponent },
        { path: 'create-secondary-order', component: CreateSecondaryOrderComponent },
        { path: 'view-secondary-orders', component: ViewSecondaryOrdersComponent },
        { path: 'view-primary-orders', component: ViewPrimaryOrdersComponent },
        { path: 'create-order-booker', canActivate: [AdminGuard], component: CreateOrderBookerComponent },
        { path: 'add-pjp', component: AddPjpComponent },
        { path: 'add-pjp-rule', component: CreatePjpRuleComponent },
        { path: 'view-pjp', component: ViewPjpComponent },

        { path: 'view-order-bookers', component: ViewOrderBookerComponent },
        { path: 'create-delivery-man', component: CreateDeliverymanComponent },
        { path: 'view-delivery-mans', component: ViewDeliverymansComponent },
        { path: 'create-order-booker-route', canActivate: [AdminGuard], component: CreateObRouteComponent },
        { path: 'view-order-booker-routes', component: ViewObRoutesComponent },
        { path: 'edit-order-booker-routes', canActivate: [AdminGuard], component: EditObRouteComponent },
        { path: 'create-delivery-man-route', component: CreateDmRouteComponent },
        { path: 'edit-delivery-man-route', component: UpdateDmRouteComponent },
        { path: 'view-delivery-man-routes', component: ViewDmRoutesComponent },
        { path: 'invoice-secondary-order', component: InvoiceSecondaryOrderComponent },
        { path: 'invoice-primary-order', component: InvoicePrimaryOrderComponent },
        { path: 'multiple-invoice-secondary-order', component: MultipleInvoiceSecondaryOrderComponent },
        { path: 'dispatch-primary-order', component: DispatchPrimaryOrderComponent },
        { path: 'special-dispatch-primary-order', component: SpecialDispatchPrimaryOrder },
        { path: 'dispatch-secondary-order', component: DispatchSecondaryOrderComponent },
        { path: 'deliver-secondary-order', component: DeliverSecondaryOrderComponent },
        { path: 'load-form', component: LoadFormComponent },
        { path: 'delivery-report', component: DeliveryReportComponent },

        { path: 'dist-sale-report', component: DistributionSaleReportComponent },

        { path: 'regional-hierarchy', loadChildren: './regionalhierarchy/regionalhierarchy.module#RegionalhierarchyModule' },
        { path: 'product', loadChildren: './product/product.module#ProductModule' },
        { path: 'pricing', loadChildren: './pricing/pricing.module#PricingModule' },
        { path: 'distributory', loadChildren: './distribution/distribution.module#DistributionModule' },
        { path: 'stock', loadChildren: './stock/stock.module#StockModule' },
        { path: 'factory', loadChildren: './factory/factory.module#FactoryModule' },
        { path: 'sole', loadChildren: './sole/sole.module#SoleModule' },
        { path: 'shopcredit', loadChildren: './shopcredit/shopcredit.module#ShopcreditModule' },
        // { path: 'shop', loadChildren: './shops/shops.module#ShopsModule' },
        { path: 'stock', loadChildren: './stock/stock.module#StockModule' },

        { path: 'error', component: AppErrorComponent },
        { path: 'accessdenied', component: AppAccessdeniedComponent },
        { path: '404', component: AppNotfoundComponent },
        { path: '**', redirectTo: '/404' },
    ]
},

---

你能创建一个Stackblitz示例或共享导致问题的代码吗？@Hussain你能给我们看看你的

路由器插座和菜单组件的代码吗？@alexortizl刚刚添加了代码。。