Angular子路由跳转异常：URL已变更但目标组件未加载

我有claims-summary和claims-insights两个组件，处于claims-summary组件时URL为/claims-summary/claimId/。期望从该组件导航至claims-insights时，新URL为/claims-summary/claimId/claims-insights/type，因此配置了子路由。调用redirectTo(type: string) {}函数后，URL成功变更但未渲染claims-insights组件，请问遗漏了什么？

相关代码如下：

app.routes.ts #

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component';
import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component';
import { ClaimsComponent } from './components/claims/claims.component';

export const routes: Routes = [
    { path: '', component: LoginComponent }, // Default route for login
    { path: 'home', component: HomeComponent }, // route for home
    { path: 'claims', component: ClaimsComponent }, // route for claims
    {
        path: 'claims-summary/:claimID',
        component: ClaimsSummaryComponent,
        children: [
            {
                path: 'claims-insights/:type',  
                component: ClaimsInsightsComponent,
            },
        ],
    },
    // { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary
    // { path: 'claims-insights/:type', component: ClaimsInsightsComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page)
];

claims-summary.component.ts #

// for claim ID from previous page
claimId: string | null = null;

constructor(private activatedRoute: ActivatedRoute) {}  
redirectTo(type: string) {
    const claimID = this.activatedRoute.snapshot.paramMap.get('claimID');
    if (claimID) {
      this.router.navigate(['claims-insights', type], { relativeTo: this.activatedRoute });
    } else {
      console.error("reroute is failing"); 
    }
}  

claims-insights.component.ts #

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import axios from 'axios';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatCardModule } from '@angular/material/card';
import { environment } from '../../../environments/environment';
import { HeaderComponent } from "../../views/header/header.component";
import { FooterComponent } from '../../views/footer/footer.component';
import { GenAssistComponent } from '../../views/gen-assist/gen-assist.component';
import { MatChipsModule } from '@angular/material/chips'; 
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list'

interface SummaryData {
  [key: string]: {
    details: string;
    lastUpdated: string;
  };
}

@Component({
  selector: 'app-claims-insights',
  imports: [
    CommonModule,
    MatExpansionModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MatCardModule,
    HeaderComponent,
    FooterComponent,
    GenAssistComponent,
    MatChipsModule,
    MatIconModule,
    MatListModule
],
  templateUrl: './claims-insights.component.html',
  styleUrl: './claims-insights.component.scss'
})
export class ClaimsInsightsComponent {

  data: any = null; // Holds the fetched data
  type: string = ''; // Holds the type (medical or financial)
  isLoading: boolean = true; // To show a loading spinner or message
  queryType: string='';

  constructor(private activatedRoute: ActivatedRoute) {}

  async ngOnInit(): Promise<void> {
    // Get the type parameter from the route
    this.type = this.activatedRoute.snapshot.paramMap.get('type') || '';
    
    // Determine the query_type based on the type parameter
    switch (this.type) {
      case 'financial':
        this.queryType = 'detailed_financial';
        break;
      case 'litigation':
       this.queryType = 'detailed_litigation';
        break;
      case 'medical':
       this.queryType = 'detailed_medical';
        break;
      default:
        console.error('Invalid type parameter.');
        this.isLoading = false;
        return;
    }

    // Construct the API URL
    const claimId = 'claimId'; // Replace with dynamic claimId if needed... My plan is to put a function here
    const url = `${environment.apiBaseUrl}?query_type=${this.queryType}&claim_id=${claimId}`;

    // Fetch the data
    try {
      const response = await axios.get(url);
      console.log('API Response:', response.data); // Debug: Log API response
      this.data = response.data; // Store API response
    } catch (error) {
      console.error(`Error fetching ${this.type} data:`, error);
      this.data = `Error fetching ${this.type} data.`;
    } finally {
      this.isLoading = false; // Hide the loading spinner
    }
  }

  goBack() {
    window.history.back();
  }

}  

核心问题是父组件ClaimsSummaryComponent的模板中缺少<router-outlet>标签。

Angular的子路由组件必须通过父组件模板里的<router-outlet>才能渲染，因为子路由的内容是嵌入在父组件中的。你已经正确配置了子路由并实现了导航逻辑，URL变化说明路由配置生效，但没有渲染目标组件就是因为缺少这个渲染出口。

修复步骤 #

1. 打开claims-summary.component.html文件
2. 在合适的位置添加<router-outlet></router-outlet>标签，示例：

<!-- 父组件原有内容 -->
<div class="claims-summary-content">
  <!-- 你的summary组件内容 -->
</div>
<!-- 添加子路由渲染出口 -->
<router-outlet></router-outlet>

额外优化建议 #

在ClaimsInsightsComponent中，你可以通过父路由动态获取claimID，替换写死的字符串：

// 在ngOnInit中替换原有的const claimId = 'claimId'
const claimId = this.activatedRoute.parent?.snapshot.paramMap.get('claimID') || 'default';

这样就能正确获取当前路由中的claimId参数，无需手动传递。

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