Question

我的Angular 4应用中的路由器链接在点击时引发错误。他们一直在努力，直到我实现了用户登录组件。加载应用程序时，它会检查用户是否已登录。如果不是，则将其发送到具有this.router.navigate(['login'])的LoginComponent。用户成功登录后，我会调用this.router.navigate([''])，其他应用程序会正常显示。然后，当在应用程序的主区域中单击链接时，将抛出此错误：

TypeError: Cannot read property 'component' of undefined
    at PreActivation.traverseRoutes (router.umd.js:4259)
    at router.umd.js:4240
    at Array.forEach (<anonymous>)
    at PreActivation.traverseChildRoutes (router.umd.js:4239)
    at PreActivation.traverseRoutes (router.umd.js:4268)
    at router.umd.js:4240
    at Array.forEach (<anonymous>)
    at PreActivation.traverseChildRoutes (router.umd.js:4239)
    at PreActivation.traverse (router.umd.js:4186)
    at MapSubscriber.project (router.umd.js:4032)
    at PreActivation.traverseRoutes (router.umd.js:4259)
    at router.umd.js:4240
    at Array.forEach (<anonymous>)
    at PreActivation.traverseChildRoutes (router.umd.js:4239)
    at PreActivation.traverseRoutes (router.umd.js:4268)
    at router.umd.js:4240
    at Array.forEach (<anonymous>)
    at PreActivation.traverseChildRoutes (router.umd.js:4239)
    at PreActivation.traverse (router.umd.js:4186)
    at MapSubscriber.project (router.umd.js:4032)
    at resolvePromise (zone.js:770)
    at resolvePromise (zone.js:741)
    at zone.js:818
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.umd.js:4143)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLDivElement.ZoneTask.invoke (zone.js:490)

如果关闭登录过程（用户直接发送到主屏幕），链接就可以正常工作。任何人都有任何信息给我？谢谢！

更新：

这是我的路由器配置：

const routes: Routes = [
    {
        path: 'main',
        component: MainComponent,
        children: [
            { path: 'source/:source', component: ListComponent }
        ]
    },
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'main/source/My workstation', pathMatch: 'full' },
    { path: '**', redirectTo: 'main/source/My workstation', pathMatch: 'full' }
];

Answer 1

当然，我在创建帖子后立即找到解决方案......

我删除了MainComponent中的路由器插座，并将主路由的子配置更改为：

{
    path: 'main',
    children: [
        { path: 'source/:source', component: MainComponent }
    ]
},
...

Angular 4路由器链接在重定向后无法正常工作

1 个答案: