Angular-边栏不在登录中显示，而在仪表板中显示-Angular路由 [英] Angular - Sidebar not to show in Login but to show in Dashboard - Angular Routing

问题描述

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

How to hide sidebar in login page?

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

How can I open login page first without sidebar and then after successful login will redirect on dashboard of template in Angular 4.

推荐答案

做到这一点的最佳方法是设计一个Shell组件(由此ngConf演讲中的黛博拉·库拉塔(Deborah Kurata)，它将在以后保存您的视图用户登录.

The best way to do this is to design a Shell Component(suggested by Deborah Kurata in this ngConf talk) which will house your View After the user logs in.

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

The template of this Shell Component will house the Side Bar. The template of this Shell Component will also have a router-outlet for internal routing.

因此您的Routes配置将如下所示:

So your Routes config will look something like this:

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组件的模板:

Template for the Shell Component:

<!--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>

这是一个 样本StackBlitz 供您参考.

Here's a Sample StackBlitz for your ref.

这篇关于Angular-边栏不在登录中显示，而在仪表板中显示-Angular路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！