CODEWITHSUNDEEP
angularangular2-router
Rakhat
Rakhat

Reputation: 4942

How to resolve route param in Angular 2

I have routes config

const appRoutes: Routes = [
  { path: '', loadChildren: 'app/+home/home.module#HomeModule' },
  { path: 'auth', loadChildren: 'app/+auth/auth.module#AuthModule' },
  { path: ':category', loadChildren: 'app/+search/search.module#SearchModule' },
  {
    path: '**',
    component: PageNotFoundComponent,
    data: { title: 'Page not found' }
  },
];

I need to check if :category route param value exist as a search category in database, if so activate route, else go to 404 page (in this case PageNotFoundComponent).

Using CanActivate is the best way? How about navigating to 404 page?

Upvotes: 0

Views: 643

Answers (1)

AngularChef
AngularChef

Reputation: 14087

Yes, you could use the CanActivate guard.

{
  path: ':category',
  loadChildren: 'app/+search/search.module#SearchModule'
  canActivate: [CanActivateCategory]
},

Then, do the redirect inside the guard:

@Injectable()
class CanActivateCategory implements CanActivate {

  constructor(private router: Router,
              private categoryService: CategoryService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    const obs = this.categoryService.categoryExists(route.params['category']);
    obs.subscribe((exists: boolean) => {
      if (!exists) this.router.navigate('/404');
    });
    return obs;
  }
}

This code assumes that you have a CategoryService to verify the existence of the category, and that you have declared a route for the path /404.

Final note: if you need to pre-load some data for the current :category, I'd put this code in a Resolve. That way, you can do it all in one place: pre-load the data, or if the data couldn't be found/preloaded, redirect to /404.

Upvotes: 1

Related Questions