Angular 2 - Kind Route haben eine andere Mutterkomponente übergeordnete Komponente

Question

Hallo Ich habe meine Routen bekam wie diese

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

einrichten Datei Was ich brauche für die event/:event_id Strecke ist zu hat eine andere übergeordnete Komponente zu den normalen parentComponent

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

Ich möchte im Grunde nur die übergeordnete Komponente von event/:event_idappComponent sein, nicht die parentCompnent

Answer 1

Für, dass Sie ganze Strecke Teil von ParentComponent Kind entfernen müssen und eine andere machen mit Eltern von AppComponent,

Bitte versuchen Sie es diese Route Einstellung:

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