Angular如何获取URL动态surveyCode并追加到API请求末尾

你当前在app.routing.module.ts中配置的路由如下：

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  {
    path: 'survey-response-handler/:surveyCode',
    loadChildren: () =>
    import('./responses/responses.module').then(
      (m) => m.ResponsesModule
    ),
    component: SurveyResponseHandlerComponent
  }
]

针对你要获取surveyCode动态参数并追加到API地址的需求，直接按以下步骤实现即可：

1. 组件内注入必备依赖 #

在路由绑定的SurveyResponseHandlerComponent组件中，先引入Angular路由、HTTP请求相关的依赖，在构造函数中注入实例：

import { Component, OnInit } from '@angular/core';
// 路由相关依赖
import { ActivatedRoute } from '@angular/router';
// HTTP请求依赖，按你项目实际封装的请求服务替换也可以
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-survey-response-handler',
  templateUrl: './survey-response-handler.component.html',
  styleUrls: ['./survey-response-handler.component.css']
})
export class SurveyResponseHandlerComponent implements OnInit {
  // 存储获取到的动态参数
  surveyCode: string | null = null;
  // 替换为你项目实际的API基础地址
  private readonly API_BASE = '你的接口基础地址，例如/api/survey/result';

  constructor(
    private route: ActivatedRoute,
    private http: HttpClient
  ) { }
}

2. 两种方式获取动态路由参数 #

根据你的业务场景选一种即可：

• 快照方式（适合无同组件路由复用场景）
  组件首次初始化时直接读取当前路由快照上的参数，写法简单，适合路由跳转后组件会重新销毁创建的场景：

  ngOnInit(): void {
    // 直接从路由快照读取参数
    this.surveyCode = this.route.snapshot.paramMap.get('surveyCode');
    // 拿到参数后发起请求
    if (this.surveyCode) {
      this.fetchSurveyData();
    }
  }
  

• 订阅参数流方式（推荐，适配所有场景）
  订阅路由参数的变化流，就算是同路由下切换不同surveyCode（比如从/survey-response-handler/1001跳转到/survey-response-handler/1002，组件被复用不销毁），也能实时拿到最新的参数值：

  ngOnInit(): void {
    this.route.paramMap.subscribe(paramMap => {
      this.surveyCode = paramMap.get('surveyCode');
      if (this.surveyCode) {
        this.fetchSurveyData();
      }
    })
  }
  

3. 拼接参数到API地址发起请求 #

拿到参数后直接拼接在API地址末尾即可调用：

fetchSurveyData() {
  // 拼接最终请求地址
  const requestUrl = `${this.API_BASE}/${this.surveyCode}`;
  // 发起请求，按你实际的接口返回类型调整泛型即可
  this.http.get(requestUrl).subscribe(response => {
    // 在这里写接口返回后的业务逻辑
    console.log('问卷数据：', response);
  })
}

注意：如果你的请求逻辑是封装在全局service或者懒加载模块的子组件中，在子组件内拿不到一级路由参数时，可以遍历ActivatedRoute的parent属性向上查找参数，你当前是在路由直接绑定的根组件SurveyResponseHandlerComponent中取参，上述代码可以直接使用，不需要额外处理路由层级。

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