角度2-子路徑的父組件與父組件不同

Question

嗨，我已經設置了我的路線文件

 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

Answer 1

為此，您需要從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 }
];