4

I have doubt in routing in angular2. I have a login screen. After login dashboard and other pages had header and footer which will not be in login.

const routes: Routes = [
{
    path:'',
    redirectTo: '/login',
    pathMatch: 'full'
},
{
    path:'login',
    loadChildren: './auth/auth.module#AuthModule',
},
{
    path: 'dash',
    loadChildren: './dash/dash.module#DashModule',
    canActivate:[AuthGuard],
    data: {
        preload: true
    }
},
{
    path: 'project',
    loadChildren: './project/project.module#projectModule',
    canActivate: [AuthGuard],
    data: {
        preload: true
    }
}
];

So its loading to the router-outlet in the app.component.html. Currently I have to use the header component in all module html, like in dash.component.html

<ks-header></ks-header>
<router-outlet></router-outlet>

This router-outlet is a child outlet on which other dash related load.
Same like for other modules. Is there any other effective way to show common header/sidebar? I tried it in app.component.html like 

<ks-header [userInfo] ="userInfo" [hidden]="isLogin"></ks-header>
<ks-sidebar [hidden]="isLogin"></ks-sidebar>

the islogin will determine logined or not. But I don't think it's a good idea.

user3118041
  • 123
  • 6
  • 2
    If it is only the header and the sidebar you need to hide then I won't go for a second router-outlet because it is too much overhead. But please don't use [hidden] here because then the header and sidebar are in the DOM but only its visible property is set to hidden. I think *ngIf="isLogin" would be better. – seveves Dec 21 '16 at 10:04
  • From the tag description for [tag:router]: *A router is a device that forwards data packets across multiple networks. DO NOT USE THIS TAG FOR QUESTIONS REGARDING URL ROUTING OR SINGLE PAGE APPLICATION ROUTERS* – connexo Dec 21 '16 at 10:34
  • @connexo apologies will correct it. – user3118041 Dec 23 '16 at 03:18

1 Answers1

2

You should use nested routes.

One for the base, as routeing between the template page and the login page.

The second and the nested one must be accomplished routeing between templated pages like 

HOME, ABOUT, CONTACT ...

You can learn more about nested routes from here. So simple explanation.

And there is another question similar to yours. Namek's answer seems useful.

Community
  • 1
  • 1
codelovesme
  • 3,049
  • 1
  • 16
  • 18