Question

您好我的路线文件设置如下

＆＃13;

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

＆＃13;

我需要的是event/:event_id路线与正常parentComponent

具有不同的父组件

＆＃13;

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

＆＃13;

我基本上只希望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 }
];

Angular 2 - 子路由具有与父组件不同的父组件

1 个答案: