当使用 Angular 嵌套路由时，若子路由（如 /offers/:id）内容出现在父组件（OffersComponent）内部而非独立页面，根本原因是子路由被配置为 children，导致其内容通过父组件的 <router-outlet> 渲染——只需将子路由提升至根级并移除嵌套结构，即可实现“全页替换”式导航。
当使用 angular 嵌套路由时，若子路由（如 `/offers/:id`）内容出现在父组件（`offerscomponent`）内部而非独立页面，根本原因是子路由被配置为 `children`，导致其内容通过父组件的 `
在 Angular 路由系统中，“嵌套”与“并列”语义截然不同：
- ✅ 嵌套路由（children）：子组件作为父组件的局部内容，在父组件模板内的 <router-outlet> 中渲染；适用于 Tab 页、侧边栏详情、表单分步等需共存场景。
- ✅ 并列路由（同级 path）：每个路由独占整个主 <router-outlet>，彼此互斥；适用于“列表页 → 详情页”这类导航跳转场景，即你期望的「单独页面展示」。
你当前的路由配置：
{
path: 'offers',
component: OffersComponent,
children: [
{ path: ':id', component: OfferDetailComponent } // ❌ 子路由 → 在 OffersComponent 内部渲染
]
}配合 offers.component.html 中的 <router-outlet>（位于标题和列表上方），导致 OfferDetailComponent 被插入到列表顶部，形成“叠加”错觉——URL 正确，但 DOM 结构不符合预期。
✅ 正确解法：改为平级路由（推荐用于列表/详情分离场景）
修改 app-routing.module.ts，移除 children，将详情路由提升至根级：
const routes: Routes = [
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{
path: 'offers',
component: OffersComponent,
canActivate: [authGuard]
},
{
path: 'offers/:id',
component: OfferDetailComponent,
canActivate: [authGuard]
}
];同时，删除 offers.component.html 中多余的 <router-outlet>（它已无用途）：
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
<!-- offers.component.html（精简后） -->
<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>? 注意：[routerLink] 使用数组语法更健壮（避免字符串拼接错误），且无需硬编码 /offers/{{id}}。
⚠️ 补充说明：何时该用嵌套路由？
仅当你需要以下效果时，才保留 children：
- 在 OffersComponent 页面内，右侧固定显示某 Offer 的详情（类似电商商品页：左侧列表 + 右侧详情面板）；
- 或通过命名路由出口（<router-outlet name="detail">）实现多出口布局。
此时，OffersComponent 必须显式包含 <router-outlet>，且子路由需指定 outlet 名称。但你的需求明确是「跳转到独立页面」，故平级路由是语义最清晰、维护成本最低的选择。
✅ 验证效果
- 访问 /offers → 显示完整列表页（无 outlet 干扰）；
- 点击任一 routerLink 跳转至 /offers/123 → 整个主 <router-outlet> 被 OfferDetailComponent 替换，列表完全消失，真正实现「独立详情页」。
此方案零侵入、无需改写组件逻辑，符合 Angular 路由设计哲学：路由结构即视图层级，路径语义决定渲染位置。
