Angular 17独立组件子路由导航失败问题求助

安全阿岳

2026-6-19

问题原因及解决办法

你的问题核心是组件名称不匹配，导致子路由出口没有放在正确的父组件模板里：

1. 路由配置与组件模板的对应错误

在app.routes.ts中，market路径对应的父组件是CampaignListComponent，但你却在market.component.html中添加<router-outlet>——实际上根本不存在这个market.component，子路由的出口必须放在父路由对应的组件模板里，也就是campaign-list.component.html中。

2. 解决步骤

打开campaign-list.component.html，添加子路由出口：

<!-- campaign-list.component.html -->
<div>
  <!-- 父组件原有内容 -->
  <button (click)="goToDevice()">跳转到Device</button>
  <!-- 子路由出口必须放在这里 -->
  <router-outlet></router-outlet>
</div>

确保CampaignListComponent中的导航代码正确（你当前的写法是对的，确认依赖注入没问题）：

import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

goToDevice() {
  this.router.navigate(['device'], { relativeTo: this.route });
}

3. 额外验证点

检查app.routes.ts中是否正确导入了CampaignListComponent和DeviceComponent，确保组件类名没有拼写错误：

import { CampaignListComponent } from './path/to/campaign-list.component';
import { DeviceComponent } from './path/to/device.component';

export const routes: Routes = [
  // ...其他路由
  {
    path: "market",
    component: CampaignListComponent,
    children: [
      {
        path: "device",
        component: DeviceComponent,
      },
    ]
  },
];

当你完成以上修改后，/market/device的路由就能正确匹配，子组件也会渲染在父组件的<router-outlet>中。