Angular 5中如何为Resolver的resolve方法传递动态参数？

我来帮你搞定这个动态传参的问题～结合你说的「参数是URL路径一部分」的场景，给你两种实用方案：

方法1：从URL路径参数中直接获取（最适配你的场景） #

既然参数是URL路径里的一部分，咱们可以直接在路由配置里定义路径参数，然后在Resolver的resolve方法里读取它，彻底替代硬编码。

步骤1：修改路由配置，定义路径参数 #

假设你的目标URL是/demo/items/:myString/detail，那路由配置要这么写：

const routes: Routes = [
  {
    path: 'demo/items/:myString/detail', // 用:myString标记路径参数
    component: YourTargetComponent,
    resolve: {
      myResolver: AppResolver
    }
  }
];

步骤2：更新Resolver，动态读取路径参数 #

在resolve方法里，通过route.paramMap.get('myString')就能拿到URL里的参数值，直接传给你的服务：

@Injectable() 
export class AppResolver implements Resolve<MyComplexObject[]> { 
  constructor(private myService: MyService) { } 

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MyComplexObject[]> { 
    // 从路径参数中动态获取myOption
    const myOption = route.paramMap.get('myString');
    return this.myService.getMyApi(myOption); 
  } 
}

这样路由跳转时，Resolver会自动抓取URL里的myString值，完全不用硬编码啦～

方法2：在路由配置中传递静态自定义参数 #

如果需要在路由配置里直接指定固定参数（不从URL取），可以通过路由的data属性传递，再在Resolver里读取：

步骤1：修改路由配置，添加自定义参数到data #

const routes: Routes = [
  {
    path: 'demo/fixed-path',
    component: YourTargetComponent,
    resolve: {
      myResolver: AppResolver
    },
    data: {
      myOption: 'your-fixed-value' // 这里可以写静态值，甚至动态生成的内容
    }
  }
];

步骤2：在Resolver中读取data里的参数 #

@Injectable() 
export class AppResolver implements Resolve<MyComplexObject[]> { 
  constructor(private myService: MyService) { } 

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MyComplexObject[]> { 
    // 从路由data中获取参数
    const myOption = route.data.myOption;
    return this.myService.getMyApi(myOption); 
  } 
}

针对你两个疑问的解答 #

1. 路由模块配置里能不能指定myOption？
   当然可以！上面的两种方法都是在路由配置里完成的：方法1通过路径参数间接传递，方法2直接用data字段传静态参数。

2. 调用Resolver的地方（this.route.data.subscribe）怎么指定myOption？
   这里不需要指定参数哦～Resolver是由路由触发执行的，参数应该在Resolver内部从路由快照/配置中获取，你只需要在subscribe里处理返回的结果就行：

   this.route.data.subscribe(data => { 
     const result = data.myResolver;
     // 在这里处理你的MyComplexObject[]结果
   });
   

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