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

Question

我有一个 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>。例如，通过这种方式，我现在可以在 url ".../detail/0" 处显示另一个组件。这称为DetailComponent。有什么问题？对于仍保留在那里的父组件（表），一切正常。当我单击一行时，该表不会消失，而是停留在那里并在其下方，出现子组件。顺便说一下，这是我的routes

const routes: Routes = [
{
    path: 'list', 
    component: ListComponent, 
    canActivate : [AuthguardService], 
    children: [
      {
        path: 'detail/:id', component: DetailComponent, canActivate : [AuthguardService],
        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

Answer 1

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

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

在路由下列为子组件的组件不会使父组件消失，父组件将成为锚点，并且它的子组件将被渲染到您在父组件中放置路由器插座的位置。