角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 } 
];