Angular 具有相同父布局的功能模块布线

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

/../app/app.component.html
//这里我想要登录和布局视图。

和布局组件：

/../app/layout.component.html
//在这里，我想布局视图，将与他们的侧菜单，如仪表板，库存等

仪表板路线在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 { }

---

如果我从资源清册模块中删除布局组件的注释，它将重新呈现布局组件（我不希望这样），我希望在每个模块中使用布局组件，这些模块都有自己的路由，但迄今为止无法这样做。

在

AppModule

中，默认情况下，您可以重定向到

功能模块，它将具有来自
布局组件的菜单，而AuthGuard可以在需要时重定向到
/login

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

在您的
InventoryModule
中，您放置了模块的所有子路由（分别是其他功能模块）。仪表板必须移动到功能模块或其自己的模块：

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

注意，使用给定的
loadChildren
语法，引用的模块将被延迟加载。如果您希望同步加载，请检查此项。
问题是，当LayoutComponent被定义为任何子管线的父组件时，它会重新呈现自身。我不知道重新呈现侧菜单和其他内容需要什么。。上面的方法和我做的结果一样。是的，你是对的。请看我的编辑，这应该可以解决这个问题。是的，kim，这就是我要找的。在你编辑之前我就想出来了，因为你的回答帮助我了解了我的不足之处。
const featureRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {        
        path: 'inventory',
        loadChildren: '../<insertyourpath>/inventory.module#InventoryModule'
      }
    ]
  }
];

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