Créer des correspondances de route personnalisées

Le router d'Angular prend en charge une stratégie de correspondance puissante que vous pouvez utiliser pour aider les utilisateurs à naviguer dans votre application. Cette stratégie de correspondance prend en charge les routes statiques, les routes variables avec paramètres, les routes wildcard, etc. Vous pouvez aussi construire votre propre correspondance de motifs personnalisée pour les situations où les URL sont plus complexes.

Dans ce tutoriel, vous allez construire un route matcher personnalisé à l'aide de UrlMatcher d'Angular. Ce matcher recherche un identifiant X (anciennement Twitter) dans l'URL.

Objectifs

Implémenter UrlMatcher d'Angular pour créer un route matcher personnalisé.

Créer une application d'exemple

À l'aide de l'Angular CLI, créez une nouvelle application, angular-custom-route-match. En plus du squelette d'application Angular par défaut, vous allez aussi créer un composant profile.

Créez un nouveau projet Angular, angular-custom-route-match.
```
ng new angular-custom-route-match
```
Lorsque la question Would you like to add Angular routing? s'affiche, sélectionnez Y.

Lorsque la question Which stylesheet format would you like to use? s'affiche, sélectionnez CSS.

Au bout de quelques instants, un nouveau projet, angular-custom-route-match, est prêt.
Depuis votre terminal, placez-vous dans le répertoire angular-custom-route-match.
Créez un composant, profile.
```
ng generate component profile
```
Dans votre éditeur de code, ouvrez le fichier profile.html et remplacez le contenu placeholder par le HTML suivant.
profile.html
```
<p>Hello {{ username() }}!</p>
```
Dans votre éditeur de code, ouvrez le fichier app.html et remplacez le contenu placeholder par le HTML suivant.
app.html
```
<h2>Routing with Custom Matching</h2>

Navigate to <a routerLink="/@Angular">my profile</a>

<router-outlet />
```

Configurer les routes de votre application

Une fois le squelette de votre application en place, vous devez ensuite ajouter les fonctionnalités de routing au fichier app.config.ts. Dans le cadre de ce processus, vous allez créer un URL matcher personnalisé qui recherche un identifiant X dans l'URL. Cet identifiant se reconnaît au symbole @ qui le précède.

Dans votre éditeur de code, ouvrez votre fichier app.config.ts.
Ajoutez une instruction import pour provideRouter et withComponentInputBinding d'Angular, ainsi que pour les routes de l'application.
```
import {provideRouter, withComponentInputBinding} from '@angular/router';

import {routes} from './app.routes';
```
Dans le tableau des providers, ajoutez une instruction provideRouter(routes, withComponentInputBinding()).

Définissez le route matcher personnalisé en ajoutant le code suivant aux routes de l'application.

app.routes.ts

{
  matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
      return {consumed: url, posParams: {username: new UrlSegment(url[0].path.slice(1), {})}};
    }

    return null;
  },
  component: Profile,
},

Ce matcher personnalisé est une fonction qui effectue les tâches suivantes :

Le matcher vérifie que le tableau ne contient qu'un seul segment
Le matcher utilise une expression régulière pour vérifier que le format du nom d'utilisateur correspond
En cas de correspondance, la fonction renvoie l'URL entière, en définissant un paramètre de route username comme sous-chaîne du chemin
En l'absence de correspondance, la fonction renvoie null et le router continue de chercher d'autres routes qui correspondent à l'URL

Utile : Un URL matcher personnalisé se comporte comme n'importe quelle autre définition de route. Définissez des routes enfants ou des routes chargées en lazy loading comme vous le feriez pour n'importe quelle autre route.

Lire les paramètres de route

Une fois le matcher personnalisé en place, vous pouvez maintenant lier le paramètre de route dans le composant profile.

Dans votre éditeur de code, ouvrez votre fichier profile.ts et créez un input correspondant au paramètre username. Nous avons ajouté la fonctionnalité withComponentInputBinding plus tôt dans provideRouter. Elle permet au Router de lier des informations directement aux composants des routes.

username = input.required<string>();

Tester votre URL matcher personnalisé

Une fois votre code en place, vous pouvez maintenant tester votre URL matcher personnalisé.

Dans une fenêtre de terminal, exécutez la commande ng serve.
```
ng serve
```
Ouvrez un navigateur à l'adresse http://localhost:4200.

Vous devriez voir une page web unique, composée d'une phrase qui indique Navigate to my profile.
Cliquez sur le lien my profile.

Une nouvelle phrase, Hello, Angular!, apparaît sur la page.

Prochaines étapes

La correspondance de motifs avec le router d'Angular vous offre une grande flexibilité lorsque votre application comporte des URL dynamiques. Pour en savoir plus sur le router d'Angular, consultez les sujets suivants :

Utile : Ce contenu s'inspire de Custom Route Matching with the Angular Router, par Brandon Roberts.