Angular中基于id_evento从LocalStorage提取赛事详情的方案咨询

1. 获取URL中的id_evento参数值 #

在Angular中，通过ActivatedRoute服务即可获取路由参数：

• 先在组件中导入ActivatedRoute：

  import { ActivatedRoute } from '@angular/router';
  

• 在组件构造函数中注入该服务：

  constructor(private route: ActivatedRoute) { }
  

• 根据业务场景选择获取方式：
  • 若路由参数不会在当前组件内变化，用快照一次性获取：

    ngOnInit(): void {
      const eventoId = this.route.snapshot.paramMap.get('id_evento');
      // 若后端返回的id是数字类型，可转换格式
      const eventoIdNum = Number(eventoId);
    }
    

  • 若需要监听参数变化（比如同一组件内切换不同赛事），用订阅方式：

    ngOnInit(): void {
      this.route.paramMap.subscribe(params => {
        const eventoId = params.get('id_evento');
        const eventoIdNum = Number(eventoId);
        // 此处可直接调用筛选赛事的逻辑
      });
    }
    

2. 从LocalStorage筛选对应赛事详情 #

LocalStorage存储的是字符串格式，需先解析为数组再筛选：

• 读取并解析LocalStorage中的赛事数组：

  const eventosStorage = localStorage.getItem('eventos');
  const eventosArray = eventosStorage ? JSON.parse(eventosStorage) : [];
  

• 根据id_evento匹配目标赛事：
  由于赛事id是唯一标识，用find方法比filter更高效：

  // 这里的eventoIdNum是第一步获取到的参数值
  const eventoDetalhe = eventosArray.find((evento: any) => evento.id_evento === eventoIdNum);
  

• 存储结果用于页面展示：
  将筛选结果赋值给组件类属性，即可在模板中直接绑定：

  // 组件类中定义属性
  public eventoDetalhe: any;
  
  ngOnInit(): void {
    // ... 前面的参数获取、数组解析代码
    this.eventoDetalhe = eventosArray.find((evento: any) => evento.id_evento === eventoIdNum);
  }
  

  若需跨组件共享该数据，可把筛选逻辑封装到Angular服务中，通过服务传递数据。

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