登录后路由问题
我正在构建angular2应用程序,目前我有一个主菜单和主菜单的菜单栏和路由器插座。我添加了登录机制,因此如果用户未通过身份验证,则登录页面将显示在整个屏幕中,登录后用户将被路由到具有上述结构的主/家庭组件。登录后路由问题
当我运行应用程序的登录页面加载,并成功通过身份验证,它将我路由到主页,但在加载菜单的主页(如Dashboard1,Dashboard2,Report1等),链接工作不正常。当我点击任何菜单栏链接时,我收到下面提到的错误。
lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900 Error: Uncaught (in promise): Error: Cannot match any routes: 'Report1'
at resolvePromise (zone.js:538)
at zone.js:515
at ZoneDelegate.invoke (zone.js:323)
at Object.onInvoke (lib/@angular/core/bundles/core.umd.js:9100)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)
at ZoneDelegate.invokeTask (zone.js:355)
我在2个地方的路由器出口标签在AppLoader将以及在其中实际菜单在加载LayoutMenu部件,即1和其包含的路由器出口加载那里的主要内容。
什么是正确的地方有路由器插座?我在哪里做错了?
下面是用于routeconfig代码
export const routes: RouterConfig = [
{ path: '', component: Login },
{ path: 'login', component: Login },
{ path: 'Home', component: Home },
{ path: '**', component: Login }
];
export const LOGIN_ROUTER_PROVIDERS = [
provideRouter(routes)
];
主页/菜单routeconfig是如下
export const routes: RouterConfig = [
{
path: 'home',
component: Home,
// canActivate: [AuthenticationGuard],
children: [
{ path: 'Dashboard1', component: Dashboard1 },
{ path: 'Dashboard2', component: Dashboard2 },
{ path: 'Report1', component: Report1 },
{ path: 'Report2', component: Report1 },
{
path: 'ManageRedisCache',
component: ManageRedisCache,
children: [
{ path: '', component: ExtractorQueue },
{ path: 'Extractor', component: Extractor },
{ path: 'Schedule', component: Schedule },
{ path: 'CacheVisualization', component: CacheVisualization }
]
}
]
}
];
export const HOME_ROUTER_PROVIDERS = [
provideRouter(routes)
];
上述2 routeconfig经由自举的main.ts被注入。在main.ts引导程序中,我还注入了包含该文件的AppLoader。
AppLoader组件如下所示,其中包含/加载登录页面。
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`,
directives: [Login, ROUTER_DIRECTIVES ]
})
export class AppLoader {
}
LayoutMenu组分是如下:
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'MenuLayout',
template: `
<a [routerLink]="['/Dashboard1']"><h4>Dashboards 1</h4></a>
<a [routerLink]="['/Dashboard2']"><h4>Dashboards 2</h4></a>
<a [routerLink]="['/Report1']"><h4>Reports 1</h4></a>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div> `,
directives: [LeftMenu, ROUTER_DIRECTIVES]
})
export class LayoutMenu { }
角路由器是足够就可以实现具有不同配置的相同的结果灵活。贝娄是一个可能的例子。
你想要两个不同的基本模板:
- 登录模板
- 内容模板(左菜单/右工作区)
样本主要app.component路由配置:
export const routes: RouterConfig =
[
...ContentRoutes,
{
path: 'login',
component: LoginComponent
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/404',
pathMatch: 'full'
}
];
现在到content.component路线(左菜单/右工作区页):
export const ContentRoutes: RouterConfig = [
{
path: 'home',
component: ContentComponent,
canActivate: [AuthenticationGuard],
children: [
{
path: '',
component: MainHomeComponent,
canActivate: [AuthenticationGuard]
}
]
},
{
path: '404',
component: ContentComponent,
canActivate: [AuthenticationGuard],
children: [
{
path: '',
component: PageNotFoundComponent,
canActivate: [AuthenticationGuard]
},
]
},
{
path: '500',
component: ContentComponent,
canActivate: [AuthenticationGuard],
children: [
{
path: '',
component: PageErrorComponent,
canActivate: [AuthenticationGuard]
},
]
},
];
所有content.component路线路由前,应通过一个AuthenticationGuard
,这就是为什么canActivate财产。更多关于angular router docs。
我还添加了404/500路由示例。
打开模板。基地app.component模板只会有一个RouterOutlet
:
<router-outlet></router-outlet>
它应该途径要么login.component或content.component(取决于用户认证)。
content.component是你的 “左菜单和工作区” 的模板,所以它应该有两个基地布局的构成要素和RouterOutlet
:
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="left-menu">
<app-menu></app-menu>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
</div>
(样本HTML)
回顾:
基本路径('/')将重定向到'/ home',默认为MainHomeComponent作为父母具有ContentComponent。*地添加更多的儿童路线。
Sample project在github上。
我已根据您的建议更新了routeconfig,但面临一些新错误。你能帮我确定问题在哪里吗?我还没有实现AuthenticationGuard,首先要实现基本的路由功能工作,然后在AuthenticationGuard上工作。 – Krishnan
@Krishnan'ExtractorQueue'似乎有一个错位的'pathMatch'属性。添加了一个示例项目链接到答案。 – leovrf
优秀答案,我成功的应用到了我的项目中 –