Angular2 Router v3,导航到不同级别:TypeError:无法读取属性' _routeConfig'为null

时间:2016-06-17 21:28:24

标签: angular angular2-routing

我正在使用新的Router v3.0.0-alpha.3。想象一下我的路线如下:

                              App
                              /\
                             /  \
                       Settings  Main
                          / \        
                         /   \      
                       User  Account

从用户组件的角度来看,我想导航到主要组件。如果我导航到设置级别中的任何组件,它可以正常工作,但当我尝试导航到其他级别时,我收到错误:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '_routeConfig' of null

我使用routerLink指令naviagate:

[routerLink]="['/main']"           <- doesn't work
[routerLink]="['/settings']"       <- works
[routerLink]="['/settings/user']"  <- works

这似乎是一个全球性问题。我只能在同一级别内导航。任何想法我怎么能绕过它?

我的路线传递给bootstrap:

export const routes: RouterConfig = [
    ...MainRoutes,
    ...SettingsRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

main.routes.ts:

export const MainRoutes: RouterConfig = [{
    path: '/main',
    component: SettingsComponent
}];

settings.routes.ts:

export const SettingsRoutes: RouterConfig = [{
    path: '/settings',
    component: SettingsComponent,
    children: [{
        path: '/user',
        component: UserSettingsComponent,
        index: true
    }]
}];

修改

由于评论中给定的链接不再起作用,我将建议临时修复。该错误仍然存​​在于路由器的alpha.7版本中,但将被修复here

问题出在 router.js 文件中,函数 GuardChecks.prototype.runCanDeactivate 第309行(在路由器v.alpha.7中):

var canDeactivate = curr._routeConfig ? curr._routeConfig.canDeactivate : null;

将其更改为:

var canDeactivate = curr && curr._routeConfig ? curr._routeConfig.canDeactivate : null;

请记住,这应该被视为临时修复,不适合自动化生产环境!

1 个答案:

答案 0 :(得分:3)

更新:已修复alpha.8

在发布新的@angular/router之前,您需要手动更新源代码,如下所述:

https://github.com/angular/angular/issues/9480#issuecomment-227845866