如何使用Router.navigateByUrl向非父子组件传递大型JSON数据

针对跨组件（既非父子关系）跳转且需传递大量JSON数据的场景，直接用URL参数/queryParams不可行——URL有长度限制，大数据会导致截断或报错。下面给你两种靠谱的实现方式：

方法一：用共享服务存储数据 #

这是最稳妥的方案，适合数据量大且需要持久化（刷新页面数据仍保留）的场景：

1. 创建单例共享服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataShareService {
  private transferData: any;

  setData(data: any) {
    this.transferData = data;
  }

  getData() {
    const data = this.transferData;
    this.transferData = null; // 取完数据清空，避免重复使用
    return data;
  }
}

2. 源组件修改跳转逻辑，先存数据再跳转：

import { Router } from '@angular/router';
import { DataShareService } from './data-share.service';

// 组件内部代码
constructor(private _router: Router, private dataService: DataShareService) {}

iconClicked() {
  const bigData = { 
    name: "tanzeel", 
    country: "india", 
    hobbies: ["football","cricket","basketball"] 
  };
  this.dataService.setData(bigData);
  this._router.navigateByUrl('/products/entity/record-page');
}

3. 目标组件初始化时获取数据：

import { OnInit } from '@angular/core';
import { DataShareService } from './data-share.service';

export class RecordPageComponent implements OnInit {
  receivedData: any;

  constructor(private dataService: DataShareService) {}

  ngOnInit() {
    this.receivedData = this.dataService.getData();
    // 此处即可使用接收的数据
  }
}

方法二：用Router的state参数（内存级临时传递） #

Angular 7+支持在路由跳转时附加state数据，数据存在浏览器内存中，不会出现在URL里，但刷新页面后数据会丢失，适合临时传递一次性数据。

注意：navigateByUrl无法直接传state，需改用navigate方法或通过UrlTree构建带state的路由：

方式A：改用navigate方法 #

iconClicked() {
  const bigData = { 
    name: "tanzeel", 
    country: "india", 
    hobbies: ["football","cricket","basketball"] 
  };
  this._router.navigate(['/products/entity/record-page'], {
    state: { transferData: bigData }
  });
}

方式B：保留navigateByUrl的实现 #

先构建UrlTree再跳转：

iconClicked() {
  const bigData = { 
    name: "tanzeel", 
    country: "india", 
    hobbies: ["football","cricket","basketball"] 
  };
  const urlTree = this._router.createUrlTree(['/products/entity/record-page'], {
    state: { transferData: bigData }
  });
  this._router.navigateByUrl(urlTree);
}

目标组件获取state数据：

import { OnInit } from '@angular/core';
import { Router } from '@angular/router';

export class RecordPageComponent implements OnInit {
  receivedData: any;

  constructor(private router: Router) {}

  ngOnInit() {
    // 两种获取方式任选其一
    this.receivedData = this.router.getCurrentNavigation()?.extras.state?.transferData;
    // 或直接从history中取
    this.receivedData = history.state.transferData;
  }
}

方案对比 #

• 共享服务：数据持久（刷新不丢失），适合需长期保留数据的场景；需注意及时清理数据，避免残留。
• Router state：无需额外服务，实现简单；但刷新页面数据消失，仅适合临时传递一次性数据。

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