当前位置：首页 > news >正文

angular中的路由传参

news 来源：原创 2025/5/15 23:18:06

一、矩阵参数

在angular中传参时可以使用矩阵参数，即直接通过变量=值的形式在地址中体现，但需要注意参数的使用范围为当前路径段，而不是全局的查询参数。

const params = {
      name: 'lhhh',
      age: 18,
      list: [{ name: 'htt' }],
    };
//先将需要传递给路由地址的对象转为字符串再编码
const GL = Base64.encode(JSON.stringify(params));
const url=`api/user/get/detail;GL=${GL}`//使用矩阵参数

//跳转地址获取传的值且存入sessionStorage
 this.route.paramMap.subscribe((result) => {
      if (result.has('GL')) {
        const GL = JSON.parse(Base64.decode(result.get('GL')));
        /**存储时需要序列化，因为sessionStorage只存储字符串类型键值对， */
        sessionStorage.setItem('data', JSON.stringify(GL));
        const data = JSON.parse(sessionStorage.getItem('data'));
        console.log(data);
      }
    });

以上获取矩阵参数时涉及到sessionStorage传值，需要注意的是：

需要获取矩阵参数：

  // 通过 snapshot 获取
  const GL = this.route.snapshot.paramMap.get('GL');

  // 或通过 Observable 监听变化
  this.route.paramMap.subscribe(params => {
    const GL = params.get('GL');
  });