如何将路由参数ID传入路由解析器并在其中获取该ID值

针对你的两个问题：如何将路由参数ID传入解析器和如何在解析器中获取ID值，其实它们是关联在一起的，Angular已经通过ActivatedRouteSnapshot为我们提供了获取路由参数的途径，下面一步步来解决：

核心原理 #

当你配置了带动态参数的路由（比如invoice/:id），Angular会把当前路由的所有参数封装到ActivatedRouteSnapshot对象中，并自动传入解析器的resolve方法里——也就是说，你不需要额外做“传入”操作，直接从这个快照对象里取就可以了。

修改你的SingleInvoiceResolverService代码 #

你当前的解析器代码里，resolve方法没有正确获取invoiceId，我们只需要从route参数中提取ID即可：

import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot, Router } from '@angular/router'; 
import { AuthService } from '../auth.service'; 
import { HttpClient } from '@angular/common/http'; 
import { Observable, of } from 'rxjs'; 

@Injectable({ providedIn: 'root' }) 
export class SingleInvoiceResolverService implements Resolve<any> { 
  constructor(
    private auth: AuthService, 
    private http: HttpClient,
    private router: Router // 可选，用于ID不存在时跳转
  ) { } 

  resolve(route: ActivatedRouteSnapshot): Observable<any> { 
    // 从路由快照的paramMap中获取id参数
    const invoiceId = route.paramMap.get('id');

    // 可选：添加参数校验，避免ID为空的情况
    if (!invoiceId) {
      // 可以跳转到列表页或抛出错误，根据业务需求处理
      this.router.navigate(['/invoices']);
      return of(null); // 返回空值或合适的默认值
    }

    // 将获取到的ID传入singleInvoice方法
    return this.auth.singleInvoice(invoiceId); 
  } 
}

关键代码解释 #

1. 获取路由参数：route.paramMap.get('id')是Angular 4+推荐的方式，它比旧的route.params.id更类型安全，因为paramMap返回的是string | null，可以提醒你做空值校验。
2. 参数校验：添加空ID的判断是个好习惯，避免后续singleInvoice方法接收到无效参数导致错误。
3. 传入ID到业务方法：直接把获取到的invoiceId传给this.auth.singleInvoice()即可，这样你的业务方法就能拿到URL中的动态ID（比如invoice/4里的4）。

为什么你的路由配置不需要修改？ #

你当前的路由配置是正确的：

{ path: 'invoice/:id', component: InvoiceDetailComponent, resolve: { invoiceDetails: SingleInvoiceResolverService }, data: { title: 'Invoice Detail' } }

:id已经定义了动态参数，Angular会自动把这个参数注入到解析器的ActivatedRouteSnapshot中，不需要额外配置。

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