📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser CanActivateChild sur Angular ?

Voici un exemple de fonction :

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
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
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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 !