角度 2 中的路由答案

【问题标题】：Routing in angular 2角度 2 中的路由
【发布时间】：2017-05-06 16:38:30
【问题描述】：

我对 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>

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

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

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

【问题讨论】：

如果它只是你需要隐藏的标题和侧边栏，那么我不会去寻找第二个路由器插座，因为它的开销太大。但是请不要在这里使用 [hidden]，因为这样标题和侧边栏在 DOM 中，但只有它的可见属性设置为隐藏。我认为 *ngIf="isLogin" 会更好。
来自router的标签描述：路由器是一种跨多个网络转发数据包的设备。请勿将此标签用于有关 URL 路由或单页应用程序路由器的问题
@connexo 道歉将纠正它。

标签： javascript html angular single-page-application angular2-routing

【解决方案1】：

您应该使用嵌套路由。

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

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

HOME, ABOUT, CONTACT ...

您可以从here 了解有关嵌套路由的更多信息。这么简单的解释。

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

【讨论】：