Les nouveautés d'Angular 19 en 4 minutes

Angular 19 vient de sortir, et il y a beaucoup de nouveautés intéressantes : hydratation incrémentale, linkedSignal, l'API des ressources, et plein d'autres choses. Venez découvrir tout ça en moins de 4 minutes !

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é.

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