Angular-侧栏不在登录中显示，而是在仪表板中显示-Angular路由

Question

如何在登录页面中隐藏侧边栏？

如何先不带侧边栏打开登录页面，然后成功登录后将在Angular 4中的模板的仪表板上重定向。

Answer 1

执行此操作的最佳方法是设计一个Shell组件（由Deborah Kurata中的this ngConf talk建议），在用户登录后容纳您的视图。

此Shell组件的模板将容纳侧边栏。此Shell组件的模板还将具有router-outlet用于内部路由。

因此您的Routes配置看起来像这样：

const appRoutes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      ...
      {
        path: 'view',
        component: ViewPostComponent
      },
      {
        path: '',
        component: PlaceholderComponent
      }
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
];

Shell组件的模板：

<!--Markup for your Sidebar here-->

<router-outlet></router-outlet>
<!--This router outlet is for Components that will load through child routing-->

您的应用组件模板：

<router-outlet></router-outlet>

这是您推荐的Sample StackBlitz。