Angular2组件在路由期间初始化两次

Question

让我先让您熟悉我的代码，然后再让您熟悉我面临的问题。下面是我的主路由app.routes.ts的代码：

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...DashboardRoutes,
    {path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]}
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes), [AuthGuard,AuthService, CanDeactivateGuard]
];

DashboardRoutes 看起来像：

export const DashboardRoutes = [
{
    path:'dashboard',
    component: DashboardComponent,
    children:[
        {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]},
        {path:'SavedData', component:SavedData, canActivate:[AuthGuard]},
        {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]}
    ],
    canActivate:[AuthGuard]
}
];

现在，当我导航到仪表板页面时，我的仪表板组件会初始化，这非常好。但是，如果我在仪表板的任何子路由组件上导航，仪表板组件会再次初始化；只有一次。我的第二个担心是，当我已经在 DashboardRoutes 中为 Deshbaord 组件 声明 Route 时，为什么我需要在 app.routes.ts 中再次声明它？如果我从app.routes.ts 中删除它的声明，它就不起作用。任何帮助表示赞赏。

Answer 1

所以我在做了一些研发之后终于得到了答案。

要求我删除的每个人都是对的

{path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]}

但是如果我删除这一行，我会收到错误：错误：无法匹配任何路线：'dashboard.'

这是因为当路由转到http://localhost:3000/dashboard 时，它会寻找进一步的重定向字符串，因为我们已经声明了dashoard 的孩子。当路由找不到任何要进一步重定向的字符串并且找不到任何空白路径时，它会引发错误。为了解决这个问题，我需要在DashboardRoutes 中为空白路径再创建一个路由条目，更改后看起来像：

 export const DashboardRoutes = [
{
    path:'dashboard',
    component: DashboardComponent,
    children:[
        {path:''},
        {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]},
        {path:'SavedData', component:SavedData, canActivate:[AuthGuard]},
        {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]}
    ],
    canActivate:[AuthGuard]
}
];

我从https://plnkr.co/edit/QlMe6pMINxJGTdA3xm0B?p=preview得到解决这个问题的想法

所以解决方案背后的想法是，如果某个组件带有某个子路由组件，那么也需要在 children 数组中为空白路径创建一个条目。

感谢您的帮助。欢迎提出任何问题。

Answer 2

您的仪表板组件被加载了两次，因为您在应用程序中声明了两次，一次在 app.routes 中，第二次在仪表板路由中......只需在 dashboardroutes 中声明它，并在 app.routes 中提供其链接作为..

导出常量路由：RouterConfig = [ ...登录路线， ...仪表板路线];

导出常量 APP_ROUTER_PROVIDERS = [ provideRouter(routes), AuthGuard,AuthService, CanDeactivateGuard ]

这将解决您的两个问题..

如果您仍有任何疑问，请告诉我们:)