Ersetzen geordneten Ansicht Router Ansicht mit Kindern in Angular 2

Question

Ich habe eine Routing-Konfiguration, wie unten im Codefragment gegeben -

export const projectRoutes: Routes = [ 
    { 
    path: 'projects', component: ProjectComponent, canActivate: [AuthGuard] 
    }, 
    { 
    path: 'project/:id', component: ProjectDetailsComponent, canActivateChild: [AuthGuard], 
    children: [ 
     { path : 'adduser', component: AddMemberComponent, canActivate: [AuthGuard]} 
    ] 
    } 
] 

hier die Moduldefinition wird (dies ist übrigens nicht die Wurzel-Modul, das ist ein Unter/Funktionsmodul) -

//imports are removed to maintain sanity 

@NgModule({ 
    imports: [ 
    CommonModule, 
    ProjectRoutingModule 
    ], 
    declarations: [routableComponents], 
    providers: [ProjectService] 
}) 
export class ProjectModule { } 

Und die Projektdetails HTML -

<div *ngIf="project" class="row justify-content-md-center"> 
    <!-- project details here --> 
</div> 
<router-outlet> 
</router-outlet> 

Jetzt möchte ich show add-user form (Benutzer hinzufügen), wenn der Benutzer auf diese Route geht - /project/{id}/adduser.

Da die Route adduser Kinder von project/:id ist, wird in router-outlet unter diesem HTML geladen. Ich möchte jedoch dieselbe Ansicht ersetzen und sie nicht unter bereits gerendertem HTML anzeigen. Wie im Bild Schlag gegeben -

Was ich erreichen will -

Gibt es eine Möglichkeit, es zu erreichen?

Answer 1

Sie können prüfen, adduser vom Status Kind zu entfernen:

export const projectRoutes: Routes = [ 
    { 
    path: 'projects', component: ProjectComponent, canActivate: [AuthGuard] 
    }, 
    { 
    path: 'project/:id', component: ProjectDetailsComponent, canActivateChild: [AuthGuard]}, 

     { path : 'projects/:id/adduser', component: AddMemberComponent, canActivate: [AuthGuard]} 

    } 
] 

Answer 2

ProjectDetailsComponent Vorlage der <router-outlet></router-outlet> so enthalten, dass Kinder dort wiedergegeben werden können.