javascript - Angular 2 中的路由

Question

我对 angular2 中的路由有疑问。我有一个登录屏幕。登录后仪表板和其他页面有页眉和页脚，这些页眉和页脚将不会在登录中。

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

所以它加载到 app.component.html 中的路由器导出。目前我必须在所有模块 html 中使用 header 组件，例如 dash.component.html

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

此路由器 socket 是其他仪表板相关负载的子 socket 。
与其他模块一样。有没有其他有效的方法来显示常见的标题/侧边栏？我在 app.component.html 中尝试过，比如

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

islogin 将确定是否已登录。但我认为这不是一个好主意。

Answer 1

你应该使用嵌套路由。

一个用于基础，作为模板页面和登录页面之间的路由。

第二个和嵌套的必须完成模板页面之间的路由，如

HOME, ABOUT, CONTACT ...

您可以从 here 了解更多关于嵌套路由的信息.如此简单的解释。

还有 another question类似于你的。 Namek的回答似乎很有用。