父组件未隐藏在 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>

当我点击按钮时，我可以显示该页面的内容（因为路由器插座）。我现在可以显示一个包含一些内容的 table，它工作正常。现在，我需要单击一行并显示该行本身的详细信息。为此，我只是在做这样的事情

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

和这个 table 的同一页（我正在使用 ngx-datatable）我还有另一个 <router-outlet></router-outlet>。通过这种方式，我现在可以在 url ".../detail/0" 处显示另一个组件，例如。这叫做DetailComponent。有什么问题？一切正常，但父组件（table）仍保留在那里。当我单击一行时， table 并没有消失，而是停留在那里，就在它的正下方，子组件出现了。顺便说一句，这是我的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 一样是它的子组件。

在路由下作为子组件列出的组件不会使父组件消失，父组件将成为锚点，它的子组件将呈现到您在父组件中放置 router-outlet 的位置。

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

Parent component not hides in Angular router

router

typescript

angular

angular-router

angular-load-children