Si une page souhaite fournir un accès à une autre page via un bouton ou une ancre, elle peut le faire via la propriété routerLink. Rajoutons au fichier courses.component.html les 3 premières lignes suivantes :

<nav>
  <a routerLink="/mon-comp/42">Mon comp 42</a>
</nav>

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

@switch (nb_UE) {
  @case(0) {
    <li>Pas d'élément dans UE</li>
  }
  @case(1) {
    <li>un seul élément dans UE</li>
  }
  @default {
    <li>plusieurs éléments dans UE</li>
  }
}

Alors, si le navigateur accède à l’url http://127.0.0.1:4200/courses, on obtient l’affichage suivant :

Si on clique sur l’ancre « Mon comp 42 », on est automatiquement redirigé vers l’url http://127.0.0.1:4200/mon-comp/42 comme le montre l’image ci-dessous. Notez que l’url associée à la propriété routerLink est spécifiée par rapport à la racine de l’application /.

Dans le code ci-dessus, on a affecté une route fixe, /mon-comp/42 au routerLink mais, dans certains cas, on souhaiterait calculer cette route dynamiquement en fonction des actions qu’a déjà réalisées l’utilisateur ou en fonction des données que l’on a reçues du backend. Dans ce cas, il suffit d’utiliser le property binding sur la propriété routerLink, comme le montre le code ci-dessous. Le plus simple est alors de scinder la route en morceaux en utilisant / comme séparateur et de placer ceux-ci dans un tableau. Dans le code ci-dessous, la route reviendrait à la chaîne de caractères « /mon-comp/{{nb_UE}} ».

<nav>
  <a [routerLink]="['/mon-comp', nb_UE]">Mon comp nb UE</a>
</nav>

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

@switch (nb_UE) {
  @case(0) {
    <li>Pas d'élément dans UE</li>
  }
  @case(1) {
    <li>un seul élément dans UE</li>
  }
  @default {
    <li>plusieurs éléments dans UE</li>
  }
}

Un composant peut bien évidemment récupérer les paramètres de la route actuelle. Pour cela, il faut que sa classe TypeScript contienne une instance de ActivatedRoute. Ensuite, il suffit d’appeler sa propriété snapshot.params, comme le montre le code ci-dessous. Dans ce code, comme la route spécifiée dans app.routes.ts est path: 'mon-comp/:id', le nom du paramètre s’appelle id.

import { Component } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-mon-comp',
  imports: [],
  templateUrl: './mon-comp.component.html',
  styleUrl: './mon-comp.component.scss'
})
export class MonCompComponent {
  // la valeur du paramètre id de la route
  myParam !: number;

  // ActivatedRoute permet de récupérer des informations sur la route actuelle
  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.myParam = this.activatedRoute.snapshot.params['id'];
  }
}

<p>mon-comp works!</p>
<p>paramètre de la route : {{myParam}}</p>

Ce code afficherait la page suivante :

On pourrait envisager des routes (et vous le ferez avec votre forum) qui contiennent plusieurs paramètres, par exemple :

{path: 'mon-comp/:idCours/:IdTopic', component: ...}

Dans ce cas, on peut récupérer ses paramètres grâce aux lignes suivantes dans le TypeScript du composant :

....

ngOnInit(): void {
  this.myParamCours = this.activatedRoute.snapshot.params['idCours'];
  this.myParamTopic = this.activatedRoute.snapshot.params['idTopic'];
}

....

Jusqu’ici, c’est le template HTML qui, via routerLink, permettait de passer d’une page à l’autre. Vous vous en servirez pour passer, par exemple, de la page des cours à celle des topics. Mais il peut également être intéressant que ce soit le TypeScript qui effectue cette démarche. Ce sera notamment le cas pour passer de la page de login à celle des cours. En effet, quand vous cliquez sur le bouton de connexion, le TypeScript interroge le backend pour déterminer si le login/password est valide. Le cas échéant, le TypeScript doit vous rediriger vers la page des cours.

Pour effectuer cela, il suffit de récupérer une instance de Router par dependency injection et d’utiliser sa méthode navigate ou navigateByUrl, qui vous redirigera vers la route passée en argument.

import {Component, OnInit, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {Course, MonServiceService} from '../services/mon-service.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-courses',
  imports: [
    FormsModule
  ],
  templateUrl: './courses.component.html',
  styleUrl: './courses.component.scss'
})
export class CoursesComponent implements OnInit {
  titre = signal('composant courses');

   UE : Course[] = [];
   idMonComp !: string;

   constructor(private service : MonServiceService,
               private router : Router) {}

   ngOnInit() {
     this.service.getCourses().subscribe(result => {
       this.UE = result;
     });
   }

   rediriger() {
     if (typeof this.idMonComp === 'undefined') this.idMonComp = 'vide';
     this.router.navigateByUrl(`/mon-comp/${this.idMonComp}`);
   }
}

<input [(ngModel)]="idMonComp" placeholder="saisir un id"/>
<button (click)="rediriger()">Rediriger vers</button>

<p>{{titre()}}</p>
<ul>
  @for (module of UE; track module.nom) {
    <li>élément {{$index}} : {{module.nom}} : {{module.nb_etuds}} étuds</li>
  }
</ul>

Cela affichera la page ci-dessous. Quand on saisit une chaîne de caractères dans l’input, le two-way binding met à jour la valeur de l’attribut idMonComp. Lorsque l’on clique sur le bouton, par event binding, la méthode rediriger() est exécutée et this.router.navigateByUrl redirige vers la route demandée. Par exemple, si idMonComp = "toto", on est redirigé vers la route /mon-comp/toto.