具有相同父布局角度的功能模块路由

Question

我想为不同的功能模块使用相同的布局（在 app.module.ts 中定义），每个模块都有自己的路由。还有一个单独的登录/注册布局，没有侧边菜单、页眉和页脚。到目前为止我试过这个：

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

还有一个布局组件：

//../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>

仪表板路由在 app.module.ts 中，但清单和其他模块有自己的模块和路由，如下所示：

//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 { }

和其他模块：

//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 { }

如果我从清单模块中删除布局组件的注释，它会重新呈现布局组件（我不希望这样），我想在每个有自己的路线的模块中使用 layoutComponent，但目前无法这样做。

Answer 1

在您的AppModule 中，您可以默认重定向到FeaturesModule，这将具有来自LayoutComponent 的菜单，而AuthGuard 可以在需要时重定向到/login。

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

在您的FeaturesModule 中，您将在LayoutComponent 的出口中呈现特征路径：

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

在您的 InventoryModule 中，您放置了所有模块的子路由（分别为其他 FeatureModules）。 DashBoard 必须移动到 FeaturesModule 或它自己的模块中。：

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

请注意，使用给定的loadChildren 语法，引用的模块将被延迟加载。如果您希望它同步加载，请查看此SO answer。