父组件不会隐藏在Angular路由器中

问题描述

我有一个appComponent，其中显示了工具栏，页脚和主要内容。此主要内容使用router-outlet指令。就是这样

<div class="h-100">
    <app-toolbar></app-toolbar>
    <app-breadcrumb></app-breadcrumb>
    <div class="container h-100">
      <router-outlet></router-outlet>
    </div>
</div>

在工具栏中，我有一个包含一些项目的菜单。例如

<button [routerLink]="['/list']" routerLinkActiveOptions="{exact:true}">List</button>

当我单击按钮时，我可以显示该页面的内容（由于路由器出口）。现在，我可以显示一个包含一些内容的表格，并且效果很好。现在，我需要单击一行并显示该行本身的详细信息。为此，我只是在做类似的事情

<a [routerLink]="['detail/',row.id]">{{value}}</a>

，并且在此表的同一页中（我正在使用ngx-datatable），我还有另一个<router-outlet></router-outlet>。这样，我现在可以在网址“ ... / detail / 0”处显示另一个组件。这称为DetailComponent。有什么问题？对于仍然保留在那里的父组件（表），一切工作正常。当我单击一行时，该表不会消失，而是停留在该表的正下方，出现子组件。这是我的routes

const routes: Routes = [
{
    path: 'list',component: ListComponent,canActivate : [AuthguardService],children: [
      {
        path: 'detail/:id',component: DetailComponent,data: {
          breadcrumb: ''
        }
      }
     ],data: {
      breadcrumb: 'List'
    } 
  },{
    path: '',redirectTo: '/home',pathMatch: 'full'
  },{ path: '**',redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{ enableTracing: false })],exports: [RouterModule]
})
export class AppRoutingModule { }

我也尝试从ListComponent中删除<router-outlet></router-outlet>，但如果这样做，子组件将不会显示

https://stackblitz.com/edit/angular-router-basic-example-n2uzis?file=app/views/details/detail.component.ts

解决方法

这是当前路由设置的预期行为。

为了修复它，应该有一个包装器组件而不是ListComponent，并且列表组件也应该是它的子组件，例如DetailComponent。

在路由下列为子级的组件不会使父级组件消失，父级将成为锚点，并且其子级将渲染到将路由出口放置在父级组件中的位置。