Revoir le live - Interview avec Gérôme Grignon

Développeur front-end et figure de la communauté Angular

Découvrez le parcours de Gérôme Grignon, développeur front-end, contributeur open source et membre actif de la communauté Angular en France.

Dans cette interview, il partage son cheminement personnel et professionnel : de sa découverte du front-end à son engagement dans la pédagogie et la transmission.

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

Comment utiliser CanActivateChild sur Angular ?

Voici un exemple de fonction (par exemple dans le fichier can-activate-child.guard.ts)

ts
import { inject } from "@angular/core";
import { Router } from "@angular/router";

export const CanActivateChildGuard = () => {
    return true
}

Voici un exemple de configuration de route qui utilise CanActivateChild :

ts
import { Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
import { AuthGuard } from './auth.guard';
import { CanActivateChildGuard } from './can-activate-child.guard';

export const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    canActivate: [AuthGuard], // Vérifie si l'utilisateur est authentifié avant de lui permettre d'accéder à la route parent
    canActivateChild: [CanActivateChildGuard], // Vérifie si l'enfant de la route peut être activé
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

Dans cet exemple, le AuthGuard est utilisé pour vérifier si l'utilisateur est authentifié avant de lui permettre d'accéder à la route parent, tandis que le CanActivateChildGuard est utilisé pour vérifier si l'enfant de la route peut être activé.