Angular CLI 8.1.0如何传递参数调用PHP接口获取MySQL数据

我看了你的代码，发现几个关键小问题导致参数传递不正确，咱们一步步来修正：

问题分析 #

你的代码里有3个核心问题：

1. Angular组件里获取查询参数的方式有误
2. API服务错误地将参数转成JSON字符串拼到URL，导致PHP收到的不是纯数字ID
3. 用了过时的HttpClient用法，不需要手动解析JSON

修正后的代码 #

1. approval.component.ts #

修正查询参数的获取逻辑，同时封装重复的加载数据逻辑：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/api.service';

@Component({
  selector: 'app-approval',
  templateUrl: './approval.component.html',
  styleUrls: ['./approval.component.css']
})
export class ApprovalComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute, private apiService: ApiService) { }
  id: any;
  result: any;

  ngOnInit() {
    // 获取初始的查询参数
    const initialId = this.activatedRoute.snapshot.queryParamMap.get('id');
    if (initialId) {
      this.loadVendorInfo(initialId);
    }

    // 监听查询参数变化（如果需要动态更新数据）
    this.activatedRoute.queryParamMap.subscribe(queryParams => {
      const vendorId = queryParams.get('id');
      if (vendorId) {
        this.loadVendorInfo(vendorId);
      }
    });
  }

  // 封装加载数据的方法，避免重复代码
  private loadVendorInfo(vendorId: string) {
    this.id = vendorId;
    console.log('当前ID:', this.id);
    this.apiService.getVendorById(vendorId)
      .subscribe({
        next: data => {
          this.result = data[0]; // 因为PHP返回的是数组，取第一个元素
          console.log('获取到的商家数据:', data);
        },
        error: err => console.error('请求失败:', err)
      });
  }
}

2. api.service.ts #

修正URL拼接逻辑，去掉多余的JSON序列化，简化HttpClient用法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private httpClient: HttpClient) { }
  
  getVendorById(id: string): Observable<any> {
    // 直接将ID拼到URL，和PHP后端期望的格式完全匹配
    return this.httpClient.get(`http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php?id=${id}`);
  }
}

3. PHP后端优化（可选但推荐） #

为了防止SQL注入，建议对ID做类型校验，修改getData函数：

function getData()
{
  global $conn;
  $where = "";
  // 校验ID是否存在且为数字
  if(isset($_GET['id']) && is_numeric($_GET['id']))
  {
    $id = intval($_GET['id']);
    $where = "AND id=".$id;
  }
  
  $query=mysqli_query($conn,"select * from vendor where status='pending' ".$where);
  $data = [];
  while($row=mysqli_fetch_assoc($query))
  {
    $data[]=array("id"=>$row['id'],"changeColumn"=>$row['changeColumn'],"type"=>$row['type'],"timestamp"=>$row['timestamp'],"status"=>$row['status'],"name"=>$row['name']);
  }
  return $data;
}

测试方法 #

现在你可以访问Angular路由，比如 http://localhost:4200/approval?id=4，就能看到组件里渲染出{{result.name}}的内容了。

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