Angular中如何获取当前用户ID并传入AddExperience方法？

1. 从LocalStorage读取用户ID #

LocalStorage中存储用户ID的键是ID，直接用localStorage.getItem('ID')即可获取。要注意处理ID为空的情况（比如用户未登录时），避免无效调用。

2. 调用AddExperience方法 #

先在组件中注入你的经验服务（假设服务类名为ExperienceService），拿到用户ID后调用服务方法，并订阅请求结果处理成功/错误逻辑。

完整代码示例 #

import { Component } from '@angular/core';
import { ExperienceService } from './experience.service'; // 替换为你的服务实际路径

@Component({
  selector: 'app-experience-add',
  templateUrl: './experience-add.component.html'
})
export class ExperienceAddComponent {
  constructor(private experienceService: ExperienceService) {}

  addExperience(): void {
    // 读取LocalStorage中的用户ID
    const userId = localStorage.getItem('ID');

    // 校验用户ID是否存在
    if (!userId) {
      console.error('无法获取用户ID，请先登录');
      // 这里可以添加前端提示逻辑，比如弹出警告框
      return;
    }

    // 调用服务方法添加经验
    this.experienceService.AddExperience(userId).subscribe({
      next: (res) => {
        console.log('经验添加成功', res);
        // 成功后的逻辑：比如更新页面数据、提示用户操作成功
      },
      error: (err) => {
        console.error('经验添加失败', err);
        // 错误处理：提示用户失败原因
      }
    });
  }
}

服务方法的优化建议 #

你的AddExperience方法存在两个小问题，建议修正：

1. URL拼接缺少斜杠，会导致后端路由识别错误；
2. post方法的参数顺序错误，responseType应该放在请求配置选项中，而非请求体位置。

修正后的服务方法：

AddExperience(UserId: any) {
  // 添加斜杠分隔接口路径和用户ID
  return this.http.post(`${this.rootUrl}/AddExperience/${UserId}`, {}, {responseType: 'json'});
}

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