Ionic 4 Angular 7 - 将 object/data 传递到另一个页面

Question

我想将 JSON 对象传递到另一个页面。我试过的是使用 Angular 路由器 ActivatedRoute 传递 JSON 字符串，如下所示：

this.router.navigate(['details', details]);

然后像这样检索它：

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


constructor(private activatedRoute: ActivatedRoute) { 
  }


ngOnInit() {

  this.activatedRoute.params.subscribe(extras => {
     console.log(extras);
     this.JSONObject = extras;
  });

}

可以这样做，但嵌套的 JSON 对象变得不可访问。它变成了这个字符串：

"[object Object]"

字符串化的 JSON 对象在我传递之前很好并且可以访问。另一个问题是它将 JSON 字符串附加到 url 上，所以看起来不太好。从我读到的内容来看，以这种方式传递不仅仅是 id 的东西不是一个好习惯。

我正在考虑在 Android 中将对象作为活动之间的额外意图传递之类的东西。我搜索了文档、论坛和以前的 Whosebug 问题，但我没有找到任何使我能够实现此目的的解决方案。在 Ionic4 中使用 Angular 路由器是否有任何其他方式在页面之间传递对象？

Answer 1

我使用带有简单 setter 和 getter 的服务解决了这个问题，就像我后来发现的这个问题一样：

Ionic 4. Alternative to NavParams

首先，我使用 setter & getter 创建一个服务：

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

@Injectable({
  providedIn: 'root'
})
export class NavExtrasService {

    extras: any;

      constructor() { }

      public setExtras(data){
        this.extras = data;
      }

      public getExtras(){
        return this.extras;
      }
    }

假设我从页面 A 导航到页面 B，在页面 A:

this.navExtras.setExtras(extras)
this.router.navigateByUrl('page-b');

然后在页面 B 中，我以这种方式检索额外内容：

this.location = navExtras.getExtras();

它到目前为止有效，但我仍然不确定是否有更好的方法..

Ionic 4 Angular 7 - 将 object/data 传递到另一个页面

Ionic 4 Angular 7 - passing object/data to another page

ionic-framework

angular-router

ionic4

angular7