/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {Component, inject, Injectable} from '@angular/core'; import {bootstrapApplication} from '@angular/platform-browser'; import { ActivatedRoute, ActivatedRouteSnapshot, CanActivateChildFn, CanActivateFn, CanDeactivateFn, CanMatchFn, provideRouter, ResolveFn, Route, RouterStateSnapshot, UrlSegment, } from '@angular/router'; @Component({template: ''}) export class App {} @Component({template: ''}) export class TeamComponent {} // #docregion CanActivateFn @Injectable() class UserToken {} @Injectable() class PermissionsService { canActivate(currentUser: UserToken, userId: string): boolean { return true; } canMatch(currentUser: UserToken): boolean { return true; } } const canActivateTeam: CanActivateFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ) => { return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']); }; // #enddocregion // #docregion CanActivateFnInRoute bootstrapApplication(App, { providers: [ provideRouter([ { path: 'team/:id', component: TeamComponent, canActivate: [canActivateTeam], }, ]), ], }); // #enddocregion // #docregion CanActivateChildFn const canActivateChildExample: CanActivateChildFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ) => { return inject(PermissionsService).canActivate(inject(UserToken), route.params['id']); }; bootstrapApplication(App, { providers: [ provideRouter([ { path: 'team/:id', component: TeamComponent, canActivateChild: [canActivateChildExample], children: [], }, ]), ], }); // #enddocregion // #docregion CanDeactivateFn @Component({template: ''}) export class UserComponent { hasUnsavedChanges = true; } bootstrapApplication(App, { providers: [ provideRouter([ { path: 'user/:id', component: UserComponent, canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges], }, ]), ], }); // #enddocregion // #docregion CanMatchFn const canMatchTeam: CanMatchFn = (route: Route, segments: UrlSegment[]) => { return inject(PermissionsService).canMatch(inject(UserToken)); }; bootstrapApplication(App, { providers: [ provideRouter([ { path: 'team/:id', component: TeamComponent, canMatch: [canMatchTeam], }, ]), ], }); // #enddocregion // #docregion ResolveDataUse @Component({template: ''}) export class HeroDetailComponent { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.data.subscribe(({hero}) => { // do something with your resolved data ... }); } } // #enddocregion // #docregion ResolveFn interface Hero { name: string; } @Injectable() export class HeroService { getHero(id: string) { return {name: `Superman-${id}`}; } } export const heroResolver: ResolveFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, ) => { return inject(HeroService).getHero(route.paramMap.get('id')!); }; bootstrapApplication(App, { providers: [ provideRouter([ { path: 'detail/:id', component: HeroDetailComponent, resolve: {hero: heroResolver}, }, ]), ], }); // #enddocregion