Nested Routes and Resolve

Child Routes - Nested Paths

1export const routes: Routes = [
2  {
3    path: 'dojo',
4    component: DojoLayoutComponent,
5    children: [
6      { path: '', component: DojoHomeComponent },
7      { path: 'training', component: TrainingComponent },
8      { path: 'weapons', component: WeaponsComponent },
9      {
10        path: 'samurai/:id',
11        component: SamuraiProfileComponent,
12        children: [
13          { path: '', redirectTo: 'info', pathMatch: 'full' },
14          { path: 'info', component: SamuraiInfoComponent },
15          { path: 'skills', component: SamuraiSkillsComponent },
16          { path: 'history', component: SamuraiHistoryComponent }
17        ]
18      }
19    ]
20  }
21];

1// dojo-layout.component.ts
2@Component({
3  template: \`
4    <header>
5      <h1>Dojo</h1>
6      <nav>
7        <a routerLink="training">Training</a>
8        <a routerLink="weapons">Weapons</a>
9      </nav>
10    </header>
11
12    <!-- Children render here -->
13    <router-outlet></router-outlet>
14  \`
15})
16export class DojoLayoutComponent { }

Resolve - Data Fetching

1// resolvers/samurai.resolver.ts
2import { ResolveFn } from '@angular/router';
3import { inject } from '@angular/core';
4import { SamuraiService } from '../services/samurai.service';
5
6export const samuraiResolver: ResolveFn<Samurai> = (route) => {
7  const service = inject(SamuraiService);
8  const id = route.paramMap.get('id')!;
9  return service.getById(+id);
10};
11
12// Usage
13{
14  path: 'samurai/:id',
15  component: SamuraiDetailComponent,
16  resolve: { samurai: samuraiResolver }
17}
18
19// In the component
20export class SamuraiDetailComponent {
21  private route = inject(ActivatedRoute);
22  samurai = this.route.snapshot.data['samurai'] as Samurai;
23}