在Angular中如何将路由参数插入JSON资源请求的URL路径中

1 先确认路由配置（必填） #

你在路由跳转时传递的参数需要和路由配置的占位符名一致，才能正确拿到toto参数，修改路由配置文件（通常是app-routing.module.ts）：

const routes: Routes = [
  // 增加:toto参数占位符，和后续paramMap读取的key对应
  { path: 'homepage/:toto', component: 你的首页组件类名 }
];

2 修正路由跳转代码 #

原有跳转代码的打印语法错误可一并修正：

route(name:string) {
  this.router.navigate(['/homepage', name]);
  console.log(name);
}

3 改写Service支持动态拼接URL #

把固定URL改为动态拼接模式，将路由参数作为入参传入请求方法：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Itoto } from './你的接口定义文件路径';

@Injectable({
  providedIn: 'root'
})
export class 你的服务类名 {
  // 仅保留固定的基础路径部分
  private baseJsonUrl = './assets/json';

  // 注意HttpClient拼写要正确，原有代码拼写有误
  constructor(private http: HttpClient) {}

  // 接收toto参数动态拼接请求路径
  getTotoJson(toto: string): Observable<Itoto[]> {
    const requestUrl = `${this.baseJsonUrl}/${toto}/first.json`;
    return this.http.get<Itoto[]>(requestUrl);
  }
}

4 组件内获取路由参数并调用请求 #

ActivatedRoute通常在组件内注入，拿到参数后传给Service即可：

import { ActivatedRoute } from '@angular/router';
import { 你的服务类名 } from './你的服务文件路径';

export class 你的首页组件类名 {
  constructor(
    private activatedRoute: ActivatedRoute,
    private totoService: 你的服务类名
  ) {}

  ngOnInit() {
    this.loadJsonByRouteParam();
  }

  private loadJsonByRouteParam() {
    this.activatedRoute.paramMap.subscribe(params => {
      const toto = params.get('toto');
      // 增加判空逻辑，避免参数不存在时请求非法路径
      if (toto) {
        this.totoService.getTotoJson(toto).subscribe(jsonRes => {
          // 这里处理返回的JSON数据
          console.log(jsonRes);
        });
      }
    });
  }
}

注意事项 #

• 确保assets目录下对应toto命名的文件夹存在，且first.json文件路径正确，否则会返回404错误
• 路由参数拼接前建议做格式校验，避免传入特殊字符导致路径异常

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