Angular嵌套路由问题：子组件显示在父组件内容上方

要让Offer详情成为独立页面，核心是把嵌套路由改成同级路由，因为嵌套路由的设计逻辑就是让子组件渲染在父组件内部，导致详情和列表同时显示。具体修改步骤如下：

1. 调整路由配置 #

修改app-routing.module.ts，将/offers/:id从offers的子路由中移出，设置为同级路由：

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  // 列表页面路由
  { 
    path: 'offers', 
    component: OffersComponent, 
    canActivate: [authGuard]
  },
  // 详情页面路由（与列表同级）
  { 
    path: 'offers/:id', 
    component: OfferDetailComponent, 
    canActivate: [authGuard]
  }
];

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

2. 移除父组件中的router-outlet #

修改offers.component.html，删掉里面的<router-outlet>（现在不需要在列表页面内部渲染子组件了）：

<section class="section">
    <div class="offers-container">
        <h1>All offers</h1>
        <a *ngFor="let offer of offers" routerLink="/offers/{{offer.id}}" class="offer-card">
            <h2>{{ offer.position }}</h2>
            <p>{{ offer.location }}</p>
        </a>
    </div>
</section>

原理说明 #

• 修改后，访问/offers时，Angular会在app.component的<router-outlet>中渲染OffersComponent（列表页面）；
• 访问/offers/:id时，则会替换成渲染OfferDetailComponent（详情页面），两者完全独立，不会同时显示。

（可选优化：routerLink可以写成数组形式更规范：routerLink="['/offers', offer.id]"）

内容的提问来源于stack exchange，提问作者robertos