能否将URL参数值传入Angular Router的data参数中？

直接在路由配置的data里写:id是行不通的——因为data属于静态路由元数据，应用启动时就会被固定解析，不会自动关联动态路径参数。要实现把URL路径参数传递到data里的需求，你可以通过路由守卫在导航过程中动态修改data内容，下面是两种可行方案：

方案一：利用CanActivate守卫注入参数 #

如果你已经在用AuthGuard这类CanActivate守卫，可以直接在守卫逻辑里添加参数注入的代码：

@Injectable({providedIn: 'root'})
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 从路径参数中获取id
    const productId = route.paramMap.get('id');
    // 将id注入到路由data中
    if (productId) {
      route.data.id = productId;
    }
    // 保留原有的权限校验逻辑
    return true; // 替换为你的实际权限判断逻辑
  }
}

之后在组件里，就能通过ActivatedRoute的data流获取到注入的id：

import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({/* 组件配置 */})
export class ProductEditComponent {
  productId$ = this.route.data.pipe(map(data => data.id));

  constructor(private route: ActivatedRoute) {}
}

方案二：使用Resolve守卫预加载参数 #

如果需要对参数做额外校验或预处理，可以创建专门的Resolve守卫来完成参数注入：

@Injectable({providedIn: 'root'})
export class ProductIdResolver implements Resolve<string | null> {
  resolve(route: ActivatedRouteSnapshot): string | null {
    const productId = route.paramMap.get('id');
    // 可在此添加参数校验逻辑，比如判断id是否为有效数字
    route.data.id = productId;
    return productId;
  }
}

修改路由配置，添加resolve属性：

const routes: Routes = [
    {path: ':id', component: ProductComponent, data: {breadcrumb: {alias: 'ProductDetail'}}},
    {
        path: 'edit/:id',
        canActivate: [AuthGuard],
        component: ProductEditComponent,
        resolve: { productId: ProductIdResolver },
        data: {breadcrumb: {alias: 'ProductEdit'}}
    },
];

组件里获取参数的方式和方案一完全一致。

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