Replay

Apprendre Angular en 1h

Je me donne un objectif: vous faire découvrir et apprendre Angular en 1 heure: composant, syntaxe dans les templates, les directives, les signaux, les routeurs, les services, l'injection de dépendances, les observables et les requêtes HTTP. Le nécessaire pour faire une application Angular !.

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