Angular开发：如何在Guard路由守卫服务中获取并使用路由参数

在路由守卫中于目标页面加载前获取路由参数需要使用ActivatedRouteSnapshot的说法是完全正确的，你遇到报错是用法错误而非方案本身失效。

报错原因 #

ActivatedRouteSnapshot不是可全局注入的服务，Angular没有为它注册全局Provider，所以你把它放到Guard的构造函数中做依赖注入自然会抛出缺少Provider的错误。它的正确获取方式是通过CanActivate接口自带的入参拿到，路由触发守卫时会自动把当前要激活的路由快照作为参数传入canActivate方法。

修正后的代码 #

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { tap } from 'rxjs/operators';
import { EventManagerService } from './services/database/event/eventmanager.service';

@Injectable()
export class ManagerGuard implements CanActivate {

  constructor(
    private router: Router, 
    private eventManagerService: EventManagerService
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const eventId = route.paramMap.get('eventId');
    return this.eventManagerService.getManagerProfile(eventId)
      .pipe(
        tap(authenticated => {
          if (!authenticated) {
            this.router.navigate(['manager']);
          }
        }),
      );
  }
}

补充说明 #

你不需要改回使用ActivatedRoute，一方面ActivatedRoute在守卫中拿到的是上一个路由的信息，无法正确获取当前即将激活的路由参数；另一方面路由快照本身就是为这种场景设计的，无后续响应式更新，性能更优，完全匹配守卫的使用场景。

内容的提问来源于stack exchange，提问作者RobrechtVM