typescript - Funksjonsmoduler ruting med samme overordnede layout i Angular

Jeg vil bruke samme layout (som er definert i app.module.ts) for forskjellige feature-moduler, hver modul har sin egen routing. Og en separat login/register-layout som ikke vil ha sidemeny, header og footer. Så langt har jeg prøvd dette:

//../app/app.component.html
<router-outlet></router-outlet> // here i want login and layout view.

og en layout-komponent:

//../app/layout.component.html
<header></header>
<side-menu></side-menu>
<router-outlet></router-outlet> // here i want layout views that would have side menu with them e.g. dashboard, inventory etc
<footer></footer>

dashboard-ruter er i app.module.ts, men inventar- og andre moduler har sine egne moduler og ruter som vist nedenfor:

//app.module.ts
const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', component: DashboardOne},
            { path: 'dashboardOne', component: DashboardOne},
            { path: 'dashboardTwo', component: DashboardTwo}
        ],
        canActivate: [AuthGuard]
    }
];    
@NgModule({
  declarations: [
    AppComponent,
    DashboardOneComponent,
    DashboardTwoComponent,
    LoginComponent,
    LayoutComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    InventoryModule,
    WarehouseModule,
    UserModule,
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

og den andre modulen:

//inventory.module.ts
const appRoutes: Routes = [
    {
        path: 'inventory',
        //component: LayoutComponent,
        children: [
            { path: '', component: InventoryOne},
            { path: 'inventoryOne', component: InventoryOne},
            { path: 'inventoryTwo', component: InventoryTwo}
        ],
        canActivate: [AuthGuard]
    }
];
@NgModule({
  declarations: [
    AppComponent,
    InventoryOneComponent,
    InventoryTwoComponent,
    //LayoutComponent // want to use this layout in other modules too
  ],
  imports: [
    RouterModule.forChild(
      appRoutes
    ),
  ],
  providers: [],
})
export class InventoryModule { }

hvis jeg fjerner kommentaren for layout-komponenten fra inventarmodulen, gjengis layout-komponenten på nytt (det ønsker jeg ikke) jeg vil bruke layoutComponent i hver modul som har sine egne ruter, og så langt har jeg ikke klart å gjøre det.

Svar #1

I din AppModule kan du som standard omdirigere til FeaturesModule, som vil ha menyen fra LayoutComponent, mens AuthGuard kan omdirigere til /login når det er nødvendig.

const appRoutes: Routes = [
  {        
    path: '',
    loadChildren: '../<insertyourpath>/features.module#FeaturesModule',
    canActivate: [AuthGuard]
  },
  {
     path: 'login',
     component: LoginComponent
  }
];

I din FeaturesModule vil du ha funksjonsbanene gjengitt i utsalget til LayoutComponent:

const featureRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {        
        path: 'inventory',
        loadChildren: '../<insertyourpath>/inventory.module#InventoryModule'
      }
    ]
  }
];

I din InventoryModule plasserer du alle modulens underordnede ruter (andre FeatureModules henholdsvis). DashBoard må flyttes til FeaturesModule eller til sin egen modul.

const inventoryRoutes: [
  { path: '', component: InventoryOne},
  { path: 'inventoryOne', component: InventoryOne},
  { path: 'inventoryTwo', component: InventoryTwo}
];

Merk at med den gitte loadChildren-syntaksen, vil den refererte modulen bli lastet inn på etterskudd. Hvis du ønsker at den skal lastes inn synkront, se dette SO-svaret.

Relaterte artikler