Заменить родительский вид вид маршрутизатора с детьми в угловыми 2

Question

У меня есть настройки маршрутизации, как указано в фрагменте кода ниже -

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

Вот определение модуля (это не корневой модуль Кстати, это суб/модуль функция) -

//imports are removed to maintain sanity 

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

И детали проекта HTML является -

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

Теперь я хочу показать форму добавленного пользователя, когда пользователь перейдет на этот маршрут - /project/{id}/adduser.

Поскольку маршрут adduser является дочерним элементом project/:id, он загружается в router-outlet под тем HTML. Тем не менее, я хочу заменить один и тот же вид и не показывать его под уже обработанным HTML. Как дано в картине удара -

То, что я хочу достичь -

Есть ли способ, чтобы достичь этого?

Answer 1

Вы можете рассмотреть возможность удаления AddUser из состояния ребенка:

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 должен содержать <router-outlet></router-outlet> так, что дети могут быть оказаны там.