15-1 Route et composant projet-detail

Pour accéder à un projet et afficher son détail, il nous faudra passer en paramètre d'URL l'identifiant du projet.

Par exemple: /projets/2

La portion 2 nous renseigne sur l'identifiant du projet à récupérer via l'API et à afficher.

Créer un composant projet-detail

Lw composant projet-detail sera responsable d'afficher le détail d'un projet et la liste des issues associées.

Via la console, créez le composant:

ng generate component features/projets/pages/projet-detail

Créer la route vers projet-detail

Il est maintenant temps de créer la route dynamique. Le format est le même qu'à l'habitude, mais on ajoute un paramètre :id dans la portion path.

src/app/app.routes.ts

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'projets',
    pathMatch: 'full'
  },
  {
    path: 'projets',
    component: ProjetsIndex
  },
  {
    path: 'projets/creer',
    component: ProjetCreer
  },
  {
    path: 'projets/:id',
    component: ProjetDetail
  }
];

info

La portion :id est le segment dynamique du chemin. Mettre le symbole : devant indique à Angular que cette portion ne sera pas statique, mais pourra prendre plusieurs valeurs. Cette valeur pourra ensuite être récupérée dans la composante via le routeur.

Ainsi, n'importe quelle URL ayant le format suivant...

• /projets/2
• /projets/1003
• • /projets/999999

... sera traitée par ProjetDetail

Test manuel de la route

Vous pouvez essayer d'accéder à L'URL dynamique dans votre navigateur en essayant par exemple: http://localhost:4200/projets/1234

http://localhost:4200/projets/1234

Vous accédez bel et bien à la composante projet-detail!

info

Vous pouvez essayer plusieurs formats, que ce soit des chiffres ou des lettres et vous obtiendrez la même page.

http://localhost:4200/projets/abcd vous donnera le même résultat, par exemple.