javascript - Angular 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 }
];