Angular路由子组件显示异常：跳转后父组件未隐藏求助

问题出在你的路由结构上——你把RicercaModuloComponent设为了HomeUtenteBaseComponent的子路由，这意味着它会渲染在父组件内部的<router-outlet>中，同时父组件的内容会一直保留。要实现跳转后仅显示RicercaModuloComponent，需要把两个组件设为同级路由，具体修改如下：

修改home-utente-base-routing.module.ts #

将原来的父子路由结构调整为同级路由：

const routes: Routes = [
  // 访问 funzioniUtenteBase 时显示首页组件
  {
    path: '',
    component: HomeUtenteBaseComponent
  },
  // 访问 funzioniUtenteBase/ricercaModulo 时直接显示搜索组件，替换首页组件
  {
    path: 'ricercaModulo',
    component: RicercaModuloComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeUtenteBaseRoutingModule { }

移除不必要的<router-outlet> #

现在不需要在home-utente-base.component.html中添加<router-outlet>了，保持原代码即可——因为两个组件现在都是渲染在app.component.html的根<router-outlet>中，访问子路径时会直接替换掉首页组件，不会同时显示。

这样修改后，访问funzioniUtenteBase时显示HomeUtenteBaseComponent，点击跳转链接到funzioniUtenteBase/ricercaModulo时，页面会只显示RicercaModuloComponent，符合你的需求。

内容的提问来源于stack exchange，提问作者O.Eight