Angular子组件Resolver中Route Params为空对象问题排查

你遇到的问题核心在于Resolver中注入的ActivatedRoute并非当前子路由的实例，而是对应父路由（get路由）的实例，所以它的snapshot.params自然是空对象。

为什么组件里能正常获取参数？ #

BookComponent是直接挂载在book/:id这个子路由下的，Angular会给它注入当前子路由对应的ActivatedRoute实例，因此能直接拿到params里的id值。

正确的解决方法 #

Resolve接口的resolve方法本身会接收当前目标路由的ActivatedRouteSnapshot作为参数，你应该用这个方法参数里的路由快照来获取参数，而不是依赖注入的ActivatedRoute。

修改你的BookResolver代码如下：

@Injectable()
export class BookResolver implements Resolve<any> {
  // 无需注入ActivatedRoute
  resolve(route: ActivatedRouteSnapshot): Observable<Book> {
    console.log(route.params); // 现在会输出 {id: 1234}
    // 这里可以用route.params.id去请求对应数据
    // return this.bookService.getBookDetails(route.params.id);
  }
}

额外补充说明 #

• 当你在路由配置中使用resolve时，Angular会在激活目标路由前调用resolve方法，并自动把当前目标路由的快照传递给它，这才是获取当前路由参数的正确来源。
• 注入的ActivatedRoute在Resolver场景下指向的是父路由（get路由），因为Resolver是配置在父路由的子路由规则里的，它的上下文属于父路由，自然无法获取子路由的参数。

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