Appearance
Des routes enfants ​
Appelé aussi "routes imbriqués", les routes enfants permettent de mettre une navigation dans une vue.
Par exemple :
http://localhost/users/1337/profile
Affichera un composant Profile
pour le profil de l'utilisateur
http://localhost/users/1337/roles
Affichera un composant Roles
pour les différents rôles de l'utilisateur Cela peut s'apparenter à un menu avec des boutons changeant une page.
Rappelons la structure de notre application :
plaintext
app/
|- app.component.ts
|- app.router.ts
|- app-config.ts
|- pages/
| |- user.component.ts
| |- user-profile.component.ts
| |- user-role.component.ts
Le fichier app.router.ts
a ce code :
ts
import {Routes} from '@angular/router';
import {UserComponent} from './pages/user.component';
import {UserProfileComponent} from './pages/user-profile.component';
import {UserRoleComponent} from './pages/user-role.component';
export const routes:Routes = [
{
path: 'users/:id',
component: UserComponent,
children: [
{
path: 'profile',
component: UserProfileComponent
},
{
path: 'roles',
component: UserRoleComponent
}
]
},
];
Notez juste que nous avons la propriété children
qui définit les différents composants pour le routeur enfant.
Imbriquer le RouterOutlet ​
Le premier <router-outlet>
se trouve dans AppComponent
comme d'habitude. Le deuxième se trouve UserComponent
.
ts
import {Component, OnInit, inject} from '@angular/core';
import {ActivatedRoute, RouterOutlet} from '@angular/router';
@Component({
selector: 'app-other',
standalone: true,
imports: [RouterOutlet],
template: `
Utilisateur {{id}}
<router-outlet></router-outlet>
`
})
export class OtherComponent implements OnInit {
private route = inject(ActivatedRoute);
id = 0;
ngOnInit() {
this.id = +this.route.snapshot.paramMap.get('id')!;
}
}