如何在角度2中默认加载子路径

Question

在应用程序的开始我想加载子路由.

现在是URLcome但是相应的组件没有加载到该部分,但是当再次点击实际的URL时.

像route configure一样

  const appRoutes: Routes = [
        { path: 'a', component: AComponent,
         children:[
                   { path:'x',component:AXcomponent }
                   ]
        },
        { path: 'b', component: bComponent, }
]

现在我想加载路径a/x如何在页面开头加载？

Answer 1

添加空路径路径作为自动重定向

const appRoutes: Routes = [
    {
        path:'',
        redirectTo: 'a',
        pathMatch: 'full' 
    },
    {
        path: 'a',
        component: AComponent,
        children:[
            {
                path:'',
                redirectTo: 'x',
                pathMatch: 'full' 
            },
            {
                path:'x',
                component: AXcomponent 
            }
        ]
    },
    { 
        path: 'b',
        component: bComponent
    }
];

Answer 2

如果您的子路线包含插座，则接受的答案是不好的。

例如，我按 ID 显示“订单”，并为摘要和其他面板使用命名的出口“详细信息”。

/orders/5000001/(detail:summary)
/orders/5000001/(detail:edit)

因为这些 URL 太难看，我还希望以下两个重定向：

/orders/5000001           =>    /orders/5000001/(detail:summary)
/orders/5000001/summary   =>    /orders/5000001/(detail:summary)

所以我在孩子中尝试了一个无组件重定向：

{ path: '', pathMatch: 'full', redirectTo: '(detail:summary)' }

这会失败，因为“redirectTo”需要是绝对的（我确信这有一个复杂的技术原因）。然后我尝试了这个：

{ path: '', pathMatch: 'full', redirectTo: '/order/:id/(detail:summary)' }

这失败了，因为:id它不是孩子上下文中的命名变量。

所以最后我想出了这个：

 children: [

     { path: ':id', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     { path: ':id/summary', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     {
         // this goes in the main router outlet
         path: ':id', component: OrderFulldetailsComponent,

         children: [

             { path: 'summary', component: OrderSummaryComponent, outlet: 'detail' },
             { path: 'edit', component: OrderEditComponent, outlet: 'detail' }
         ]
     }
 ]

注意是做重要pathMatch: 'full'的path: ':id'还是它会匹配当你打/:id/(detail:summary)哪里都没去。