Question

在应用程序开始时我想加载子路径。

现在是URLcome但是该部分没有加载相应的组件，但是再次点击实际的URL。

如路由配置

  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

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

例如，我正在显示一个＆＃39;命令＆＃39;通过ID并使用指定的出口＆＃39;详细信息＆＃39;摘要以及其他小组。

/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)' }

此操作失败，因为“重定向到”＆＃39;需要绝对（我确定这是一个复杂的技术原因）。所以我试过这个：

{ 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)并无处可去时，它就会匹配。

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

2 个答案: