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

Question

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

非常感谢您的任何帮助。

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

*一旦我们单击到另一个模块组件的路由，菜单就会重置，并且用户不知道他选择了哪个模块*

主应用程序路由文件

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>

是切换到延迟加载的模块时需要保留其状态的组件，文件本身非常大，因此仅将其一部分粘贴到此处。

应用程序菜单组件

       { 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' }
                            ]
                        },
和上面是app.main.component

<router-outlet></router-outlet>

我有主要的应用程序模块和一些延迟加载的模块。有一个侧面菜单可用来控制整个应用程序的导航，一切正常，但是每次我从一个模块切换到下一个懒惰时...

Answer 1

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