Angular 18 嵌套组件路由异常：点击导航无法跳转至数据列表页

错误1：路由配置拼写不匹配 #

在route.ts的子路由配置中，你把DataList组件对应的路径写成了satalist，但导航链接里使用的是datalist，两者路径名称不一致，导致路由无法匹配到对应组件。

修正后的route.ts代码：

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { SavedataComponent } from './savedata/savedata.component';
import { DatalistComponent } from './datalist/datalist.component';

const routeConfig: Routes = [
  { path: '', component: LoginComponent },   
  { path: 'home', component: HomeComponent,
    children: [
      { path: 'savedata', component: SavedataComponent },
      // 修正拼写错误：satalist → datalist
      { path: 'datalist', component: DatalistComponent },
    ]
  }
];
export default routeConfig;

错误2：Home组件缺少路由出口 #

home.component.html里直接固定渲染了<app-savedata>，没有使用Angular的<router-outlet>来承载子路由的动态内容。子路由组件必须通过路由出口才能根据导航切换显示。

修正后的home.component.html代码：

<app-topbar></app-topbar>
<section class="presentation">
  <!-- 用路由出口替代固定组件标签，实现子路由内容的动态切换 -->
  <router-outlet></router-outlet>
</section>

完成以上两处修改后，点击导航栏的“List”选项即可正常跳转显示DataList组件，点击“Home”也会切换显示SaveData组件，符合预期效果。

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