Angular 如何基于路由参数:action动态配置canActivate和data属性

你无法在静态路由配置中直接读取路由参数:action做条件判断，需要通过函数式守卫+Resolve预处理器组合实现需求，具体实现如下：

步骤1：实现动态守卫逻辑（Angular 14+ 函数式写法） #

静态路由配置无法直接识别参数变量，你可以把守卫判断逻辑放到统一的动态守卫中处理：

import { CanActivateFn, ActivatedRouteSnapshot, RouterStateSnapshot, inject } from '@angular/router';
// 引入你原有的守卫
import { Guard1 } from './guard1.guard';
import { Guard2 } from './guard2.guard';

const dynamicActionGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const currentAction = route.paramMap.get('action');
  // 先执行Guard1校验
  const guard1Result = inject(Guard1).canActivate(route, state);
  if (currentAction === 'read') {
    return guard1Result;
  }
  // 非read场景追加Guard2校验
  return guard1Result && inject(Guard2).canActivate(route, state);
};

如果使用Angular 14以下版本，将上述函数式守卫替换为@Injectable装饰的类守卫即可，判断逻辑完全一致。

步骤2：实现动态screenAction参数赋值 #

静态data配置无法动态读取路由参数，用Resolve预处理器来动态生成screenAction值，会自动合并到路由data中：

import { ResolveFn } from '@angular/router';

export const screenActionResolve: ResolveFn<string> = (route: ActivatedRouteSnapshot) => {
  const currentAction = route.paramMap.get('action');
  return currentAction === 'read' ? 'read' : currentAction;
};

步骤3：修改路由配置 #

export const routes: Routes = [
  {
    path: 'test/:action',
    component: CreateComponent,
    canActivate: [dynamicActionGuard],
    resolve: {
      // resolve返回值会自动挂载到路由的data字段下
      screenAction: screenActionResolve
    }
  }
]

组件内使用说明 #

原有从this.route.snapshot.data.screenAction取值的逻辑无需修改，也不影响你后续直接读取:action路由参数的相关逻辑。

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