📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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')!;
  }
}

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !