javascript - Angular 2-子路径的父组件与父组件不同

嗨，我已经设置了我的路线文件

const routes: Routes = [
    { path: '', component: parentComponent, canActivate: [ LoggedInGuard ], children: [
        { path: 'profile', component: ProfileComponent },
        { path: 'sign-out', component: SignOutComponent },
        { path: 'set-password', component: SetPasswordComponent },
        { path: '', canActivate: [ LastLoginDateGuard ], children: [
            { path: 'admin', canActivate: [ adminGuard ], children: [
                { path: 'event/:event_id',  component: appComponent,  children: [
                    { path: '', component: EventComponent }
                ]},
            ]},
        ]},
        { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
    ]},
    { path: '', component: AppComponent },
    { path: 'home', component: HomeComponent },
    { path: 'sign-in', component: SignInComponent },
    { path: 'sign-up', component: SignUpComponent },
    { path: '**', component: PageNotFoundComponent }
];

我需要的是event/:event_id路由具有与普通parentComponent不同的父组件

{ path: 'admin', canActivate: [ adminGuard ], children: [
  { path: 'event/:event_id',  component: appComponent,  children: [
    { path: '', component: EventComponent }
  ]},
]},

我基本上只是希望event/:event_id的父组件是appComponent而不是parentCompnent

最佳答案

为此，您需要从ParentComponent子级中删除整个路由部分，并使用AppComponent的父级来制作另一个，

请尝试以下路线设置：

const routes: Routes = [
    { path: '', component: parentComponent, canActivate: [ LoggedInGuard ], children: [
        { path: 'profile', component: ProfileComponent },
        { path: 'sign-out', component: SignOutComponent },
        { path: 'set-password', component: SetPasswordComponent },
        { path: '', redirectTo: '/sign-in', pathMatch: 'full' }

    ]},

    { path: '', canActivate: [ LoggedInGuard ], children: [
        { path: '', canActivate: [ LastLoginDateGuard ], children: [
            { path: 'admin', component: appComponent, canActivate: [ adminGuard ], children: [
                { path: 'event/:event_id' ,  children: [
                    { path: '', component: EventComponent }
                ]},
            ]},
        ]}
    ]},

    { path: '', component: AppComponent },
    { path: 'home', component: HomeComponent },
    { path: 'sign-in', component: SignInComponent },
    { path: 'sign-up', component: SignUpComponent },
    { path: '**', component: PageNotFoundComponent }
];