带有子路由和导航栏的 Angular 模块

Question

我有一个分为以下模块的应用程序：

/app
    /core
    /admin
    /authentication
    /wst

Admin 是一个带有侧边栏的复杂模块，而身份验证只是一个登录屏幕。我只想在管理模块处于活动状态时才加载侧边栏，并且我不想将它包含在带有 *ngIf 的 app.component.html 中。

我怎样才能使这样的配置工作？ 我正在使用 Angular7，并启动了 stackblitz that shows my problem。

• 如果我将路由器插座添加到 app.component.html，例如。 /login 路线有效 很好。
• 如果我尝试对 /admin 进行相同操作，则没有任何显示。

Answer 1

如果您想在 AdminComponent 中使用 ProfileComponent，则 AdminModule 的路由应该类似于：

const routes: Routes = [
  {
    path: '', component: AdminComponent,
    children: [
      { path: 'profile', component: ProfileComponent }
    ]
  },
]

还有一些构建错误需要先修复：

• 在 AdminModule 中导入 AdminRoutingModule 而不是 RoutingModule。

• 应该在 AdminModule 中声明或导入 ProfileComponent。

然后/admin/profile 应该显示带有菜单和配置文件的 AdminComponent。如果你希望它是/admin，只需在路由中添加重定向规则即可。