Angular 路由 - 传递 json 对象但参数是 1 个实心字符串

Question

我正在构建一个应用程序并在不同页面之间传递用户数据，我有一个名为 profileData 的变量，它是一种 json 类型的配置文件。

我像这样在路由器中传递它：

return this.router.navigate(['/chat-profile', { profile: JSON.stringify(this.profileData) }]);

当我导航到该页面时，我在浏览器中看到的数据 url 是这样的

http://localhost:8100/chat-profile;profile=%7B%22photos%22:%5B%5D,%22uid%22:%22AzvHdHKIYS%22,%22enabled%22:true,%22gps%22:false,%22about%22:%22%22,%22createdAt%22:%222019-04-30T14:34:06.994Z%22,%22updatedAt%22:%222019-04-30T14:34:22.033Z%22,%22gender%22:%22M%22,%22name%22:%22joe%22,%22location%22:%7B%22latitude%22:220.09,%22longitude%2222:14.46%7D,%22age%222:22,%22id%22:%22FbbQseOJFH%22%7D

在组件中访问它时，它只是一个实心字符串。如何在 angular routing

中传递一个对象

Answer 1

您可以更改为

this.router.navigate(['/chat-profile'], 
        { queryParams: { profile: JSON.stringify(this.profileData) }});

通过

获取参数

 this.route.queryParams.subscribe(
      params => {
         let data = JSON.parse(params['profile']);
         console.log('Got param: ', data.longitude);

      }
    )

Answer 2

使用路由器参数在 angular 中的组件之间共享此类数据是一种不好的做法。您应该为此使用共享服务。有关 angular 中组件之间共享数据的不同方式的更多详细信息，请参阅这篇文章：

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Angular 路由 - 传递 json 对象但参数是 1 个实心字符串

Angular Routing - passing json object but param is 1 solid string

ionic-framework

angular

ionic4