访问子模块中的路由 ID

Question

I am pretty new to Angular routing and am trying to access an ID from the route but it seems like no params are available. Here's how my routes are organized (this is imported in app.module.ts):

import {FinancePageModule} from './client-detail/finance/finance.module';
import {AuthGuard} from '../../auth/auth.guard';
import {ClientDetailPageModule} from './client-detail/client-detail.module';
import {ClientIndexPageModule} from './client-index/client-index.module';

const clientsRoutes: Routes = [
  {
    path: 'clients',
    component: ClientIndexPage,
    canActivate: [AuthGuard],
  },
  { path: 'clients/:id',
    component: ClientDetailPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'finance',
        component: FinancePage
      },
      {
        path: '',
        redirectTo: 'finance',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(clientsRoutes),
    FinancePageModule,
    ClientIndexPageModule,
    ClientDetailPageModule,
  ],
  exports: [RouterModule]
})
export class ClientsRoutingModule { }

My FinancePageModule has no routing (which might be why I cannot access the ID) and when the FinancePage is loaded, the ID is null.

export class FinancePage implements OnInit {

  client_id: number;

  constructor( private route: ActivatedRoute ) {
  }

  ngOnInit() {
    this.client_id = parseInt(this.route.snapshot.paramMap.get('id'));
    console.log(this.client_id) // logs NaN
  }
}

How do I modify my routing so that this variable is available in the FinancePage component?

Answer 1

In your case the id is set in the parent route so you can use this.route.parent ,

The reason is ActivatedRoute only passes the parameters for the current component route and because the route for finance doesn't have any route parameters it didn't pass any parameter so you have to get the params for the parent route by using route.parent .

 ngOnInit() {
    this.client_id = parseInt(this.route.parent.snapshot.paramMap.get('id'));

   this.route.parent.params.forEach(
      param => console.log(param)
    )

    this.route.parent.paramMap.subscribe(params => {
      console.log(params)
    })
  }