Question

让我先熟悉我的代码然后再解决我面临的问题。以下是我的主要路由add_custom_command(OUTPUT generated-source.cpp COMMAND external-source-generating-tool -o generated-source.cpp DEPENDS external-source-generating-tool COMMENT "Generating...")的代码：

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] } ];中为 Deshbaord组件声明路由时，为什么我需要在DashboardRoutes中再次声明它？如果我从app.routes.ts删除其声明，它就不起作用。任何帮助表示赞赏。

Answer 1

您的仪表板组件正在加载两次，因为您已在应用程序中声明了两次，一次在app.routes中，其次在仪表板路径中...仅在dashboardroutes中声明它并在app.routes中提供其链接为..

导出const路由：RouterConfig = [       ... LoginRoutes，       ... DashboardRoutes];

export const APP_ROUTER_PROVIDERS = [       提供路由器（路由），AuthGuard，AuthService，CanDeactivateGuard]

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

如果仍然有任何疑问，请告诉我们：）

Answer 2

所以最后我做了一些R＆amp; D后得到了答案。

你们每个人都是谁让我要删除

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

但如果我删除此行，则收到错误：错误：无法匹配任何路由：'信息中心。'

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

 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

解决这个问题

解决方案背后的想法是，如果有一些组件带有一些子路由组件，那么子数组中的一个条目也需要用于空白路径。

感谢您的帮助。随意提出任何问题。

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

2 个答案: