Angular - 侧边栏不显示在登录中，而是显示在仪表板中 - 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 组件(由 Deborah Kurata 在 本次 ngConf 演讲) 中用户登录.

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 组件的模板还将有一个 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'
  }
];

壳组件的模板:

<!--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 Routing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！