将默认路由与 angular 中的父路由保持一致

Question

我有一个名为 "Profile" 的父路由，在里面我有像基本、公司、联系人这样的子路由。因此，当我单击像 Profile 这样的父路由时，默认情况下它应该显示基本组件中存在的内容。

export const appRoutes: Routes = [
{ path: 'profile', component: ProfileComponent,
        children: [
            {
                path: 'basic',
                component: BasicComponent,
                pathMatch: 'full'
            },
            {
                path: 'company',
                component: CompnayComponent
            },
            {
                path: 'contacts',
                component: ContactsComponent
            },
            {
                path: 'compliance',
                component: ComplianceComponent
            }
        ]
    }

所以当用户点击个人资料时，基本内容应该会自动显示。那么如何实现呢？谁能帮帮我？

Answer 1

在子路由中添加到 basic 的重定向

{path: '', redirectTo: 'basic'}

如果您现在导航到 /profile/，它将重定向到 /profile/basic

Answer 2

在你的路由配置中添加到 basic 的重定向：

 export const appRoutes: Routes = [
 { path: 'profile', component: ProfileComponent,
    children: [
         {
            path:'',
            redirectTo: 'basic',
            pathMatch: 'full' 
        },
        {
            path: 'basic',
            component: BasicComponent,
            pathMatch: 'full'
        },
        {
            path: 'company',
            component: CompnayComponent
        },
        {
            path: 'contacts',
            component: ContactsComponent
        },
        {
            path: 'compliance',
            component: ComplianceComponent
        }
    ]
}

将默认路由与 angular 中的父路由保持一致

keeping default route with parent route in angular

angular-routing

angular