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