Angular路由传递JSON至组件且不显示在URL的问题

我来帮你搞定这个问题！你现在遇到的核心问题是混淆了Angular路由里的静态路由data和动态路由参数的用法，下面给你详细分析和解决方案：

问题根源 #

你在app.route.ts里配置的data: {some_data : null}是静态路由数据，它是固定绑定在路由上的，不会被router.navigate()时传递的参数覆盖。而你跳转时的写法是试图传递动态参数，但组件里却订阅了route.data（静态数据），所以才会一直输出{"some_data":null}。

解决方案：两种动态传参方式 #

根据你的需求，推荐以下两种正确的传参方式：

方式1：使用查询参数（queryParams）传递JSON #

这种方式不需要修改路由配置，参数会以?key=value的形式附加在URL后面：

1. 修改跳转代码：因为路由参数只能是字符串，所以需要把JSON对象转成字符串：

this.router.navigate(['/home/calculator'], {
  queryParams: { some_data: JSON.stringify(this.loanData) }
});

2. 组件内获取数据：订阅queryParams并解析JSON：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { OnInit, OnDestroy } from '@angular/core';

export class CalculatorComponent implements OnInit, OnDestroy {
  private paramSub!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.paramSub = this.route.queryParams.subscribe(params => {
      if (params.some_data) {
        const receivedLoanData = JSON.parse(params.some_data);
        console.log('收到的贷款数据：', receivedLoanData);
      }
    });
  }

  // 记得取消订阅，避免内存泄漏
  ngOnDestroy() {
    if (this.paramSub) {
      this.paramSub.unsubscribe();
    }
  }
}

方式2：使用路由路径参数（params） #

如果希望参数嵌入到URL路径中，需要先修改路由配置：

1. 修改路由配置：添加动态参数占位符：

{ path: 'calculator/:some_data', component: CalculatorComponent }

2. 修改跳转代码：同样需要把JSON转成字符串：

this.router.navigate(['/home/calculator', JSON.stringify(this.loanData)]);

3. 组件内获取数据：订阅params并解析：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { OnInit, OnDestroy } from '@angular/core';

export class CalculatorComponent implements OnInit, OnDestroy {
  private paramSub!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.paramSub = this.route.params.subscribe(params => {
      if (params.some_data) {
        const receivedLoanData = JSON.parse(params.some_data);
        console.log('收到的贷款数据：', receivedLoanData);
      }
    });
  }

  ngOnDestroy() {
    if (this.paramSub) {
      this.paramSub.unsubscribe();
    }
  }
}

注意事项 #

• 因为路由参数只能是字符串类型，所以必须用JSON.stringify()和JSON.parse()来处理JSON对象；
• 如果你的数据比较敏感或者结构非常复杂，不建议用路由参数传递（会暴露在URL中），可以考虑用Angular服务来共享数据；
• 一定要在组件销毁时取消订阅，避免内存泄漏。

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