Routing in angular 2

Question

I have doubts about routing in angular2. I have a login screen. After the control panel and other pages had a header and footer that would not be logged in.

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
    }
}
];

Thus, uploading it to the router-exit in app.component.html. Currently, I have to use the header component in the whole html module, e.g. in dash.component.html

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

This socket outlet is a child outlet that is subject to another binding.
Same as for other modules. Is there any other effective way to show a common title / sidebar? I tried this in app.component.html for example

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

islogin will determine the login or not. But I do not think this is a good idea.

Answer 1

.

, .

,

HOME, ABOUT, CONTACT ...

. .

, . Namek .