Angular 4 个不同的菜单选项基于 link 在仪表板页面中的点击

Question

我是 Angular 2 的新手，我正在努力创建一个具有以下要求的示例项目结构，并在 google 中搜索合适的 link.

我已经完成了第 1 步和第 2 步，但第 3 步令人困惑（可能这个概念与不同模块之间的路由有关）

有什么帮助吗，

以下是要求。

第 1 步：登录页面。第 2 步：成功登录后，用户应导航到包含三个 links.

的页面

因此用户可以单击此页面中的任何一个 link。

第 3 步：对于每个 link 单击，用户应导航到另一个页面，该页面包含与第二步中的特定 link 相关的 link 导航菜单。

所以这里用户可以再次单击 link 中的任何一个，并且在单击之后应该显示相对 html 页面。

Answer 1

所以，您只需要嵌套路由。

你可以拥有：

const routes : Routes = [
  {
    path: 'pages',
    loadChildren: 'app/pages/pages.module#PagesModule',
  }, {
    path: 'login',
    component: loginComponent,
 }
]

loadChildren 用于延迟加载

您的 PagesModule 的路由：

const routes : Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    component: PagesComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
          {
            path: 'whatever',
            component: WhateverComponent
          }, {
            path: 'morewhatever',
            component: MoreWhateverComponent
          },
        ],
      },
    ],
  },
];

Angular 4 个不同的菜单选项基于 link 在仪表板页面中的点击

Angular 4 different menu options based on link click in dashboard page

angular-routing

angular2-routing

angular