Question

在我的SPA应用程序中，我有导航：

+-- Home (route: /)
+-- System Information (route: /sys-info/)
  +-- System (route: /sys-info/system)
  +-- Health (route: /sys-info/health)
+-- Settings (route: /settings)

我需要为System information部分列出具有说明的小节（System，Health）的着陆页。

在此着陆页上还会出现一个复选框＆＃34;不要再次显示＆＃34;值存储在localStorage中。如果选中，则第一部分应显示在导航到路由/sys-info/时。

每个子部分屏幕看起来都相似：左侧面板带有导航菜单，主面板带有内容。在导航菜单中，将显示所有子部分（System，Health），并突出显示当前部分（侧边菜单允许在子部分之间导航）。

到目前为止，在主app.component.ts我已经@RouteConfig：

{
    path: '/',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
},
{
    path: '/system-information/...',
    name: 'SystemInformation',
    component: SystemInformationComponent
},
{
    path: '/settings',
    name: 'Settings',
    component: SettingsComponent
}

在模板中，我在菜单下面有<router-outlet>标记。

@RouteConfig中的

SystemInformationComponent：

{
    path: '/',
    name: 'SysInfoLanding',
    component: SysInfoLandingComponent,
    useAsDefault: true
},
{
    path: '/system',
    name: 'SysInfoSystem',
    component: SystemComponent
},
{
    path: '/health',
    name: 'SysInfoHealth',
    component: HealthComponent
}

在模板中，我有左侧菜单和右侧容器，内容为标记<router-outlet>。但我不知道如何为此目标网页准备html。

解决后，我需要将解决方案复制到主菜单中的其他项目 - 最好准备可重复使用的组件。 Settings也有子项目 - 不要在此处显示以保持可读性。

使用着陆页进行路由

0 个答案: