如何在带参数的Angular路由中传递含路由参数的静态路由数据？

方法1：组件内直接拼接（最简便） #

无需修改路由配置，直接在组件内结合路由参数生成目标值：

constructor(private _contexts: ChildrenOutletContexts) { }

getRouteAnimationData(): Data | unknown {
  const routeSnapshot = this._contexts.getContext('primary')?.route?.snapshot;
  const type = routeSnapshot?.params['type'];
  return type ? `${type}Page` : null;
}

这种方式逻辑直接，不需要额外配置，适合简单的参数拼接场景。

方法2：通过路由守卫动态修改data #

如果希望路由data本身携带动态值，可以用CanActivate守卫在路由激活前修改data字段：

首先定义守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DynamicDataGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    const type = route.params['type'];
    // 动态替换data中的animation值
    route.data['animation'] = `${type}Page`;
    return true;
  }
}

修改路由配置引入守卫：

const routes: Routes = [{ 
  path: '/record/:type',
  component: RecordComponent,
  data: { animation: '' }, // 预留默认值
  canActivate: [DynamicDataGuard]
}];

配置完成后，你原来的getRouteAnimationData方法无需修改，就能获取到动态生成的animation值。

方法3：使用Resolve预加载动态数据 #

如果需要基于路由参数做异步处理（比如请求后端数据），可以用Resolve守卫预加载数据：

定义Resolver：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AnimationDataResolver implements Resolve<string> {
  resolve(route: ActivatedRouteSnapshot): string {
    const type = route.params['type'];
    return `${type}Page`;
  }
}

路由配置：

const routes: Routes = [{ 
  path: '/record/:type',
  component: RecordComponent,
  resolve: {
    animation: AnimationDataResolver
  }
}];

组件内获取数据的逻辑保持不变，依然可以通过route.snapshot.data['animation']拿到结果。

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