Angular 19 - 重新路由到子路由未按预期工作

Question

我有 2 个组件：

claims-summary

和

claims-insights

。当我在

claims-summary

组件中时，URL 将为“/claims-summary/claimId/”。当我从

claims-summary

和

claims-insights

导航时，新 URL 应为“/claims-summary/claimId/claims-insights/type”。所以我添加了一个子路由器。

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();
  }

}  

当我调用

redirectTo(type: string) {}

函数时，URL从“/claims-summary/claimId/”更改为“/claims-summary/claimId/claims-insights/type”，但不会重定向到

claims-insights

组件。我错过了什么？

Answer 1

由于

ClaimsInsightsComponent

是

ClaimsSummaryComponent

下的嵌套路由，因此只有在

<router-outlet>

视图中添加

ClaimsSummaryComponent

元素时才会显示。

claims-summary.component.html

<router-outlet></router-outlet>

请注意，当您浏览“/claims-summary/{claimId}/claims-insights/{type}”时，这将在同一视图中同时显示

ClaimsSummaryComponent

和

ClaimsInsightsComponents

。

演示（嵌套路由）@StackBlitz

---

如果您想在浏览上述 URL 时仅显示

ClaimsInsightsComponent

，则必须展平 URL，而不是嵌套路由。

export const routes: Routes = [
  ...
  {
    path: 'claims-summary/:claimID',
    component: ClaimsSummaryComponent,
  },
  {
    path: 'claims-summary/:claimID/claims-insights/:type',
    component: ClaimsInsightsComponent,
  },
  ...
];

演示（扁平化路线）@StackBlitz